子ルートの名前付きルータアウトレットのコンテンツを設定する

Question

私のアプリケーションでは、2つのルータアウトレット（プライマリとアウトレット）にコンテンツを表示したいとします。私はルートレベルの両方でコンセントを配置した場合、私はこのような名前のアウトレットの内容を設定することができる午前：

this.router.navigate([{ outlets: { rootSecondary: ['rootSecondaryPath'] } }]); 

をしかし、私は、単一のルータ-コンセントを提供しても、アプリケーションの一般的なレイアウトをしたいです子経路で異なるルータ出口構造を使用することができます。

子供のルートを作成すると、それにはプライマリと名前付きのアウトレットがあり、セカンダリアウトレットのコンテンツを設定できません。報告されているエラーは次のとおりです。

どのルートにも一致しません。次のように

経路が定義されている： - テストの目的のために -

const appRoutes: Routes = [ 
    { path: '', component: RootPrimaryComponent }, 
    { path: 'rootSecondaryPath', component: RootSecondaryComponent, outlet: 'rootSecondary' }, 
    { 
    path: 'child', component: ChildComponent, children: 
     [ 
     { path: '', component: ChildPrimaryComponent }, 
     { path: 'childSecondaryPath', component: ChildSecondaryComponent, outlet: 'childSecondary' }, 
     ] 
    }, 
]; 
const appRouting = RouterModule.forRoot(appRoutes); 

app.component.htmlのテンプレートが第一出口とを含有する二次1名前：

<router-outlet></router-outlet> 
<div style="border: solid 1px green"> 
    <router-outlet name="rootSecondary"></router-outlet> 
</div> 

上記のコードはボタンから呼び出され、問題なくrootSecondaryコンセントを設定します。

child.component.htmlルート第一出口の内側に配置された2つの出口定義テンプレート：

<router-outlet></router-outlet> 
<div style="border:solid 1px red"> 
    <router-outlet name="childSecondary"></router-outlet> 
</div> 

child.primary.component.htmlはにコードを呼び出すボタンが含まれてい第二出口を設定します。クリックすると

<div> 
    child-primary works! 
    <button (click)="setChildSecondary()">Set child secondary</button> 
</div> 

、次のコードが実行されます。

setChildSecondary() { 
    this.router.navigate([{ outlets: { childSecondary: ['childSecondaryPath'] } }]); 
} 

ルータ出口childSecondaryがいっぱいになるようにコードを変更する必要がありますか？

Answer 1

これを解決するために、私は、現在アクティブなルートの親にrelativeToのparamを設定するために必要な：

export class ChildPrimaryComponent { 

    constructor(private readonly router: Router, 
    private readonly route: ActivatedRoute) { } 

    setChildSecondary() { 
    this.router.navigate([{ outlets: { childSecondary: ['childSecondaryPath'] } }], 
     { relativeTo: this.route.parent }); 
    } 
}