Question

我需要在每个路由器插座链路上显示相同的块。它只是一个标题，但标题和一些按钮是从应用程序组件管理的。

我基本上需要做这样的事情：

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

在每个路由器链接里面都是这样的：

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

因此md-toolbar标签将位于页面内

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>

Angular 4路由器插座内容

3 个答案: