Angular 5 没有子 url 的路由器出口模板

Question

我想使用 Component 作为模板，然后让 router-outlet 注入子组件。

我知道我可以使用 children 路线轻松完成，所以我按如下方式进行。

我的路线：

export const routes: Routes = [
  { path: 'main', component: TemplateComponent, children: childRoutes }
];

export const childRoutes: Routes = [
  { path: 'page-one', component: PageOneComponent }
];

TemplateComponent:

<div class="some-awesome-template">
  <router-outlet></router-outlet>
</div>

只要我有一个遵循模式 /**/*;

的 url 就可以正常工作

我的问题是我想将此模板逻辑用于没有子 url 的页面，例如/about.

现在我是这样做的：

about路线：

{ path: 'about', component: TemplateComponent }

然后 TemplateComponent 看起来像这样：

<div class="some-awesome-template">
  <span [ngSwitch]="variableWithCurrentUrl">
    <span *ngSwitchCase="'about'">
      <app-about></app-about>
    </span>
    <router-outlet *ngSwitchDefault></router-outlet>
  </span>
</div>

这可行，但我想使用 router-outlet 注入 AboutComponent，就好像它是子 url，而不是手动执行。

但重要的是，并非每条 /** 路线都获取模板，因此，例如 /contact 有自己的模板。

可能吗？

Answer 1

您可以使用 main 路由，其中 TemplateComponent 将被分配，它将成为根路由的子路由：

export const childRoutes: Routes = [
  { path: '', 
    component: AppComponent
    children: [{
       path: 'main',
       component:TemplateComponent,
       children: childRoutes
    }, 
    {
       path: 'contract', 
       component: ContractComponent
    }
    ]
  }
];

app.component.template:

<router-outlet></router-outlet>

那么/contract不使用component:TemplateComponent
/main 之后的任何路由都将分配给 TemplateComponent 模板

Angular 5 没有子 url 的路由器出口模板

Angular 5 templating with router-outlet without sub urls

templating

angular-routing

angular