web-dev-qa-db-fra.com

Redirection vers une nouvelle page dans Angular 2 Routing

J'ai un scénario dire un Home Page (app.component.ts avec main.html) qui est routé par défaut

app.component.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>

Maintenant, disons que pour les 2 composants que je veux router à l'aide de la sortie du routeur, mais pour l'utilisateur, je veux router vers une toute nouvelle page, c'est-à-dire pas dans la sortie du routeur. J'ai essayé navigate et navigateByUrl ne fonctionne pas, il le charge toujours dans le <router-outlet>. Merci de ne pas suggérer window.href

J'ai essayé d'utiliser la classe Redirect dans angular2/router, mais je suis incapable de le faire.

routingangularangular2-routing
7
Pratik Kelwalkar

UPDATE: le code de configuration complet du routeur dans cette réponse concerne un routeur obsolète et supprimé environ 6/2016

Je pense que ce que vous voulez, ce sont des routes pour enfants - voir Plunker

Mise à jour Plunker avec navigation déplacée à Page1

lorsque la route parente permet de basculer entre Page1 et Page2, Page1 permet de basculer entre About et Contact et que Page2 a uniquement User.

Page2 peut aussi être directement UserComponent, uniquement si cette page doit prendre en charge plusieurs composants, il est nécessaire d'en faire un composant avec des itinéraires enfants.

Vous pouvez bien sûr naviguer entre User et par exemple About avec 

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';
  }  
}
6
Günter Zöchbauer

J'avais des exigences similaires: je devais accéder à une nouvelle page après avoir cliqué sur le bouton… .. Disons que nous avons des composants trainer, admin, stagiaire, pied de page, en-tête et login.

Dans notre appcomponent j'ai 

<header></header>
<login></login>
<router-outlet></router-outlet>
<footer></footer>

maintenant, lorsque je vais à la nouvelle page après la connexion, ce qui se passera est que la nouvelle page viendra, mais ma page de connexion originale est toujours là et la nouvelle page passera sous cette page de connexion, car 

<router-outlet></router-outlet>

dans le modèle de Appcomponent . Pour résoudre ce problème, j'ai ajouté <header></header> et <footer></footer> au début et à la fin de chaque page . Maintenant, dans Appcomponent,

<router-outlet></router-outlet>.

ainsi, lorsque nous acheminons vers une nouvelle page, celle-ci occupe toute la page.

0
Santosh Kadam

La solution simple consiste simplement à utiliser router-outlet dans app.component.html au lieu de l'utiliser dans le code HTML où votre code d'interface utilisateur est écrit. Cela évite qu'une nouvelle page vienne sous la page d'origine. assurez-vous de ne pas écrire de code dans app.component.html

par exemple, si votre code html principal est écrit dans home.component.html et que vous devez router vers la page connections.component.html, procédez comme suit:

index.html:

<app-root></app-root> // cela vous mènera au composant d'application à partir de l'index

app.component.html:

<router-outlet></router-outlet> // ceci chargera le nouveau code de page dans app.component.html home.component.html:

<a routerLink =['/connection'] > Add connection </a> // route vers connection.html U n'a pas besoin d'écrire routeur-prise dans home.component.html

0
pujitha