角4のルータ出口の内容

Question

すべてのルータ出口リンクに同じブロックを表示する必要があります。そのヘッダだけですが、タイトルといくつかのボタンはappコンポーネントから管理されています。だから、MD-toolbarタグはページの内側になり

<ng-content></ng-content> 
<h1>This is my page</h1> 
<p>blablabla</p> 

：

<router-outlet> 
    <md-toolbar (click)="someAction()"> {{ title }} </md-toolbar> 
</router-outlet> 

そして、すべてのルータリンクの内側にこのような何か：私は基本的にこのような何かをする必要があり

Answer 1

<router-outlet>にはコンテンツがありません。これは、ルータがコンポーネントを追加するアンカーです。

ダミーコンポーネント（show-nothing-component）とともに空のパスのルートを使用すると、ユーザーが詳細ビューにナビゲートする前に既定のコンテンツを表示できます。

Answer 2

はこのようにそれを変更してみてください：

<md-toolbar (click)="someAction()"> {{ title }} </md-toolbar> 
<router-outlet></router-outlet> 

そして、それは、ルーティングされたコンテンツ上の上部に表示されます。

ツールバーがなくてもコンポーネントが必要な場合は、別の中間コンポーネントが必要です。

app.component.html上記ルータコンセントに

<router-outlet></router-outlet> 

ルートあなたがなしメニューやツールバーが必要な場合。ツールバーを必要としないすべてのコンテンツのための上記のルータコンセントに

shell.component.html

<md-toolbar (click)="someAction()"> {{ title }} </md-toolbar> 
<router-outlet></router-outlet> 

ルート。

ルート設定

RouterModule.forRoot([ 
     { 
      path: '', 
      component: ShellComponent, 
      children: [ 
       { path: 'welcome', component: WelcomeComponent }, 
       { path: 'x', component: XComponent}, 
       { path: '', redirectTo: 'welcome', pathMatch: 'full' }, 
      ] 
     }, 
     { path: 'login', component: LoginComponent }, // <-- no toolbar 
     { path: '**', component: PageNotFoundComponent } // <-- no toolbar 
    ]) 

Answer 3

あなたはこの方法でそれを行う必要があるのはなぜ？

<md-toolbar (click)="someAction()"> {{ title }} </md-toolbar>  
<router-outlet></router-outlet> 

このツールバーは、ルータのアウトレットの上に毎回生成されます。あなたは使う必要はありません<ng-content>