Angular 2 RC1 untergeordnetes Routing

Question

Momentan bin ich in der Lage, grundlegende Fälle von Routing mit Angular 2 RC1, wie Hauptkomponente mit wenigen Links, durch Klicken auf sie Inhalte im Haupt Router Outlet zu rendern.

In ähnlicher Weise rendert das Klicken auf den Link in der untergeordneten Komponente die untergeordnete Komponente in der Outlet-Komponente der untergeordneten Komponente.

Was ich nicht erreichen kann, ist der Fall, wo ich eine Kindkomponente im Hauptausgang der Anwendung rendern muss.

Meine URL-Struktur ist wie folgt:

/account/user/ 
/account/user/profile/ 
/account/user/otherfeature/ 

/account/admin/ 
/account/admin/somefeature 
/account/admin/anotherfeature 

ich den folgenden Code haben, die, wenn sie zeigt eine Homepage laufen, mit Links zu

User Account: points to, /account/user/ 
Admin: points to /account/admin/ 
User Profile: points to /account/user/profile/ 

Ein Klick auf die obigen Links macht Inhalte in Router Ausgang der App-Komponente mit Ausnahme der Profilverbindung. Wenn ich auf den Link Profil klicke, funktioniert der Link, aber die Profilkomponente wird auf der Benutzerkontoseite gerendert (als Unterabschnitt). Ich möchte, dass beim Klicken auf die Profilverknüpfung Inhalte im Hauptrouteroutlet, dh Router-Outlet von App, gerendert werden Komponente.

Ein anderes Problem, derzeit muss ich eine Konto-Komponente hinzufügen, sonst der Router erlaubt keine URLs mit "Konto" Wort drin. Gibt es eine Möglichkeit, ein Präfix an URLs anzuhängen, ohne es einer Komponente zuzuordnen? Nach meinem Verständnis zerhackt der aktuelle Router die URL im URL-Segment und versucht, den Account-Teil der URL einer Komponente zuzuordnen, daher muss ich eine Komponente dafür haben. Bitte berate jeden besseren Weg, um dies zu erreichen.

App-Komponente:

import {Component, OnInit} from '@angular/core'; 
import {Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router'; 

import {AccountComponent} from './account.component'; 

@Component({ 
    selector: 'app', 
    template: ` 
     <a href="/index.html">Home</a> | 
     <a [routerLink]="['./account/user/']">User Account</a> | 
     <a [routerLink]="['./account/user/profile/']">Profile</a> | 
     <a [routerLink]="['./account/admin/']">Admin Account</a> | 

     <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 
@Routes([ 
    { path: '/account', component: AccountComponent }, 
]) 
export class AppComponent { 
    constructor(private router: Router) { 
    } 
} 

Konto Komponente:

import { Component } from '@angular/core'; 
import { Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router'; 
import { UserAccountComponent } from './user/user-account.component'; 
import { AdminAccountComponent } from './admin/admin-account.component'; 

@Component({ 
    template: '<router-outlet></router-outlet>', 
    directives: [ROUTER_DIRECTIVES] 
}) 
@Routes([ 
    { path: '/user', component: UserAccountComponent }, 
    { path: '/admin', component: AdminAccountComponent } 
]) 
export class AccountComponent { 

    constructor() { } 

} 

User Account Komponente:

import { Component } from '@angular/core'; 
import { Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router'; 
import { ProfileComponent } from './profile.component'; 

@Component({ 
    template: ` 
     <h1>User Account</h1> 
     <a [routerLink]="['./profile']">Profile</a> 
     <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 
@Routes([ 
     { path: '/profile', component: ProfileComponent }, 
]) 
export class UserAccountComponent { 

    constructor() { } 
} 

Profil Component

import { Component } from '@angular/core'; 

@Component({ 
    template: ` 
     <h1>Profile</h1> 
    `, 
}) 
export class ProfileComponent { 

    constructor() {} 

} 

Answer 1

what I want is that clicking Profile link should render contents in the main router outlet i.e. router outlet of App Component.

Dann muss die AppComponent mit dem Pfad eine Route enthalten, die Sie in den routerLink

verwenden

@Component({ 
    selector: 'my-app', 
    styles: [':host { display: block; border: solid 3px red;}'], 
    template: ` 
     <!--<a href="/index.html">Home</a> |--> 
     <a [routerLink]="['./account/user/']">User Account</a> | 
     <a [routerLink]="['/account/user/profile/']">Profile</a> | 
     <a [routerLink]="['./account/admin/']">Admin Account</a> | 

     <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 
@Routes([ 
    { path: '/account/user', component: UserAccountComponent }, 
    { path: '/account', component: AccountComponent }, 
]) 
export class App { 
    constructor(private router: Router) {} 
} 

Derzeit ist die Reihenfolge der Routen ist von Bedeutung. Die wichtigeren Routen müssen an erster Stelle stehen. In diesem Fall würde die umgekehrte Reihenfolge niemals /account/user finden, da /account alle Routen abgleichen würde, die mit /account beginnen.

Plunker example