角2のルーティング子供とルータのアウトレット

Question

私は別のコンセントにロードする必要があります子供とのルーティングを使用しています。 すべてのコンポーネントは、/ appフォルダ内に直接配置されます。

app.router.ts：

export const router: Routes = [ 

    { path:'dashboard', canActivate:[AuthguardGuard], component: DashboardComponent }, 
    { path:'', component: LoginComponent }, 
    { 
     path: 'dashboard', component: DashboardComponent, 
     children: [ 
      { path:'features', component: FeaturesComponent, outlet: 
      { path:'signup', component: SignupComponent, outlet: 'content' }, 
      { path:'more', component: MoreComponent, outlet: 'content', 
      { path: '**', component: PageNotFoundComponent } 
     ] 
    } 
]; 

dashboard.component.html：下のアプリケーションをロードするとき

<a [routerLink]="['./']">Overview</a> 
<a [routerLink]="['features']">Features</a> 
<a [routerLink]="['details']">How To</a> 
<a [routerLink]="['more']">SignUp</a> 
<a [routerLink]="['signup']">SignUp</a> 

：http.//localhsot:4200、私が最初にロードされた（ログインコンポーネント/ページで始まりますデフォルトでは名前のないルータアウトレット）があり、ユーザを確認してパスします。その後、ダッシュボードコンポーネント/ページ（AuthguardGuardを使用）に移動します。 URLは次のようになります。「コンテンツ」

app.component.ts：

<main class="mdl-layout__content"> 
    <div class="mdl-layout__tab-panel is-active" id="overview"> 
     <router-outlet></router-outlet> 
     <router-outlet name="content"></router-outlet> 
    </div> 
</main> 

私は他のページ/コンポーネントにナビゲートできるようにしたい、と彼らは口にロードする必要があるダッシュボードページから http://localhost:4200/dashboard

私はプラットホームでここで見つかった提案はほとんど試していませんが、どれも役に立たなかったのです。例えば：のような <a [routerLink]="['signup', {outlets: {content: 'signup'}}]">SignUp</a> <a [routerLink]="['../signup']">SignUp</a>

しかし、それは動作しませんでした...別のエラー： Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'signup'

I'amが間違っているものを任意のアイデアや私が何を変更したりしてください追加する必要がありますか？

Answer 1

私はこれの修正が非常に難しいと思います。パスが

アップデート1

理由が空である理由あなたはだapp.component.htmlであなたの名前のコンセントを定義し、この

[routerLink]="['', {outlets: {content: 'signup'}}]">SignUp</a> 

ようなあなたのrouterlinkで空のパスを定義しようあなたの名前付きルータがこのようなダッシュボードと同じテンプレートにあるため、名前付きルータがこのように表示されないのはなぜですか？

<router-outlet></router-outlet> 
<router-outlet name="content"></router-outlet> 

ここでのエラーは、ダッシュボードが表示される「メイン」ルータと同じレベルの「コンテンツ」ルータにあることです。 「コンテンツ」ルーターは、app.component.htmlのではなく、ダッシュボードのcom.ponent.htmlとの内部にある必要があります。 <router-outlet name="content"></router-outlet>をdashboard.component.html内に貼り付けてコピーすれば問題ありません。