Angular 4 Router-Outlet Inhalt

Question

Ich muss den gleichen Block auf jedem Router-Outlet-Link anzeigen. Es ist nur ein Header, aber der Titel und einige Schaltflächen werden von App-Komponente verwaltet.

Ich brauche im Grunde so etwas wie dies zu tun:

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

Und innerhalb von jedem Router-Link etwas wie folgt aus:

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

So ist die md-Symbolleiste Tag innerhalb der Seite wäre

Answer 1

<router-outlet> soll keinen Inhalt haben. Es ist nur ein Anker, wo der Router Komponenten hinzufügt.

Sie können eine leere Pfadroute mit einer Dummy-Komponente (show-nothing-component) verwenden, um Ihren Standardinhalt anzuzeigen, bevor der Benutzer zur Detailansicht navigiert.

Answer 2

Try es wie folgt zu ändern:

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

Dann wird es an der Spitze über dem gerouteten Inhalt erscheinen.

Wenn Sie einige Komponenten ohne die Symbolleiste und einige mit benötigen, benötigen Sie eine andere Zwischenkomponente.

app.component.html

<router-outlet></router-outlet> 

Weg zum Ausgang über Router, wenn Sie keine Menü oder eine Symbolleiste benötigen.

shell.component.html

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

Weg zum oben Router Auslass für alle Inhalte, die die Symbolleiste benötigt.

Routen Konfiguration

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

Warum Sie es auf diese Weise zu tun, brauchen? Kannst du es nicht einfach so geben:

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

würde Diese Symbolleiste jedes Mal über den Router-Ausgang erzeugen sein. Sie müssen nicht verwenden <ng-content>