Redirect zu einer neuen Seite in Eckigen 2-Routing

Habe ich ein Szenario sagen Startseite(app.Komponente.ts mit main.html), die weitergeleitet wird, als Standard

app.Komponente.ts

@RouteConfig([
    {path: '/',name : 'Home' , component : HomeComponent , useAsDefault: true },
    {path: '/user', name : 'User' , component : UserComponent },
    {path: '/about', name : 'About' , component : AboutComponent},
    {path : 'contact', name : 'Contact' , component : ContactComponent}
])

main.html

<a [routerLink]="['/Home']">Home</a>
<a [routerLink]="['/User']">User Login</a>
<a [routerLink]="['/About']">About</a>
<a [routerLink]="['/Contact']">Contact</a>

<router-outlet></router-outlet>

Nun sagen wir für 2-Komponenten möchte ich die route über den router Steckdose, aber für die User, ich möchte die route zu einem gesamten neuen Seite ich.e nicht in die router-Steckdose . Ich habe versucht navigate und navigateByUrl nicht funktioniert, es immer noch lädt es in den <router-outlet> . Bitte nicht schlagen window.href

Ive versucht, mithilfe der Redirect-Klasse in angular2/router , aber nicht in der Lage zu tun das nötige.

Was ist eine "ganze neue Seite"? Eine andere Angular2 Anwendung (externer link)?
Nein, dass würde ich einfach verwenden window.location.href='www.goggle.com' oder die <a href='www.google.com'></a>, aber ja die ähnliche Art von Funktionalität zu einer internen Komponente(innen Eckig 2-Anwendung) ist das, was ich will.
Wenn Sie wissen, wie man mit, ich hoffe, Sie können mir sagen, danke

InformationsquelleAutor Pratik Kelwalkar | 2016-03-21

6

UPDATE: Der ganze router-Konfigurations-code in dieser Antwort ist für einen router veraltet ist und entfernt über 6/2016

Ich denke, was Sie wollen, sind untergeordnete Routen - sehen Plunker

Aktualisiert Plunker mit navigation verschoben Page1

wo die Eltern route erlaubt das Umschalten zwischen Page1 und Page2, Page1 erlaubt das Umschalten zwischen About und Contact und Page2 nur User.

Page2 könnte auch UserComponent direkt, nur, wenn Sie diese Seite unterstützen sollte, mehr als eine Komponente, ist es notwendig zu machen, eine Komponente mit Kind-Routen.

Können Sie natürlich die Navigation zwischen User und zum Beispiel About mit
```
router.navigate(['/Page1', 'About']);
router.navigate(['/Page2', 'User']);
```
```
import {Component, Directive, Output, EventEmitter} from 'angular2/core'
import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';

@Component({
  selector: 'contact',
  directives: [],
  template: `
  <h2>contact</h2>
`
})
export class ContactComponent {
}
```
```
@Component({
  selector: 'about',
  directives: [],
  template: `
  <h2>about</h2>
`
})
export class AboutComponent {
}
```
```
@Component({
  selector: 'user',
  directives: [],
  template: `
  <h2>user</h2>
`
})
export class UserComponent {
}
```
```
@Component({
  selector: 'page1',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <h2>page1</h2>
  <router-outlet></router-outlet>
`
})
@RouteConfig([
    {path: '/about', name : 'About' , component : AboutComponent, useAsDefault: true},
    {path : '/contact', name : 'Contact' , component : ContactComponent}
])
export class Page1 {
}

@Component({
  selector: 'page2',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <h2>page2</h2>
  <router-outlet></router-outlet>
`
})
@RouteConfig([
    {path: '/user', name : 'User' , component : UserComponent, useAsDefault: true},
])
export class Page2 {
}
```
```
@Component({
  selector: 'my-app',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <h2>Hello {{name}}</h2>
  <a href="#" [routerLink]="['/Page1','About']">About</a>
  <a href="#" [routerLink]="['/Page1','Contact']">Contact</a>
  <a href="#" [routerLink]="['/Page2','User']">User</a>
  <router-outlet></router-outlet>
`
})
@RouteConfig([
    {path: '/page1/...',name : 'Page1' , component : Page1 , useAsDefault: true },
    {path: '/page2/...', name : 'Page2' , component : Page2 },
])
export class App {
  constructor() {
    this.name = 'Angular2';
  }  
}
```
- eigentlich erstaunlich, von Ihnen eine sofortige und plunker Lösung, aber so wie ich das sehe für die plunker Beispiel oben, wenn ich auf "Benutzer" klicke, möchte ich nicht den Inhalt der Seite, wo <router-outlet> platziert. I. e ich möchte nicht, dass meine Komponenten geladen werden, die Steckdose, sondern wollen es zu laden, es als eine neue komplette Seite. nochmals vielen Dank für die Antwort
- Hast du eine Lösung für dein problem? Ich stehe vor dem gleichen hier. Dank
- Was ist eine "neue ganze Seite hier"? In der Regel in Eckigen fügen Sie ein <router-outlet> im root-Komponente AppComponent, und eine route laden, fügt der gewünschten Komponente, um diesen <router-outlet>.
- Lassen Sie uns zum Beispiel sagen, wir haben eine website, wo Sie die Zielseite ist im Grunde gemacht, um zu zeigen, die Merkmale zu Ihrer webapp mit einer Navigationsleiste, die zwei Schaltflächen login und signup. Wenn Sie klicken Sie auf login will ich die Anzeige einer neuen anderen Seite (ohne die navbar, die ich hatte in der Zielseite), die nur eine form in der Mitte. <router-outlet - > wird verwendet, wie : <Link1> <Link2> <Link3> <Router-outlet> ==> wo die Veränderungen vorgenommen werden, über die Elemente der Navigationsleiste, aber was ist, wenn auf das klicken auf einen link, ich will eine neue Struktur ohne die router-Steckdose?
- Ich denke, das ist es Wert, eine neue Frage. Ich würde nicht nur uns eine *ngIf auf die Navigationsleiste, um zu zeigen/verbergen, je nach route.
- Ich habe bereits versucht, eine neue Frage stellen über, die, das wurde abgelehnt und hatte einige ziemlich schlechte Kommentare auf Sie, wie es ist dumm so ...
- Tolle Antwort @GünterZöchbauer. Danke.
- Danke, ziemlich veraltet, obwohl. Die route-Konfiguration funktioniert nicht mit dem neuen router.
- Dawn. Trotzdem deine Antwort war wirklich komplett. Vielen Dank für Ihre efford und uns helfen 🙂 🙂 :). Cheers Mate
InformationsquelleAutor Günter Zöchbauer
0

Hatte ich ähnliche Anforderung, wo ich gehen musste, auf der neuen Seite nach einem Klick auf die Schaltfläche.
Sagen wir, wir haben Komponenten, trainer,admin,trainee,footer,header und login.

In unserem Appcomponent ich habe
```
<header></header>
<login></login>
<router-outlet></router-outlet>
<footer></footer>
```
wenn ich mir jetzt den Weg zu neuen Seite nach dem login, was passieren wird, ist die neue Seite kommen wird, aber meine original-login-Seite immer noch da und die neue Seite wird unter, die log-in-Seite, da haben wir
```
<router-outlet></router-outlet>
```
in der Vorlage Appcomponent.
Um loszuwerden dieses problem, das ich
Hinzugefügt <header></header> und <footer></footer> am Anfang und Ende jeder Seite.
Jetzt in Appcomponent wir haben nur
```
<router-outlet></router-outlet>.
```
also, wenn wir die route auf der neuen Seite belegt dieses ganze Seite.

InformationsquelleAutor Santosh Kadam
0

Die einfache Lösung ist, einfach router verwenden-Steckdose im app.component.html anstatt es in die html, wo Ihr im UI-code geschrieben , der Es vermeidet neue Seite, die unter der original-Seite. stellen Sie sicher, dass Sie sind nicht das schreiben von code in app.component.html

zum Beispiel, wenn Ihr Haupt-html-code ist geschrieben in home.component.html und Sie haben, um die route zu Seite connections.component.html dann können Sie das wie folgt tun :

index.html :

<app-root></app-root> //dieser leitet Sie an die app-Komponente von index

app.component.html :

<router-outlet></router-outlet> //dieser lädt die neue Seite von code in
app.component.html
home.component.html:

<a routerLink =['/connection'] > Add connection </a> //Routen
- Verbindung.html
U brauchen nicht zu schreiben-router-Steckdose im home.component.html

InformationsquelleAutor pujitha

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.