Angular 组件模板中有 2 个路由器插座

Question

我一直在研究 Angular 2 中的路线，但我运行遇到了一个我找不到答案的问题。我的路线是 "working" 但不是我希望的方式。我正在尝试像使用 angular 1 中的 ng-view 一样使用它，我的页眉和页脚永远不会改变，当我的 url 改变时，新的 "stuff" 被放置在我的内容中。

这是我现在拥有的 "works"

import { Component } from '@angular/core';
import { HeaderComponent } from './shared/header/header.component';
import { ContentComponent } from './shared/content/content.component';
import { FooterComponent } from './shared/footer/footer.component';
import { TestComponent } from './components/test.component';
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';

@Routes([
    {path: '/test', component: TestComponent }
])
@Component({
    selector: 'app',
    template: `<header></header>
    <a [routerLink]="['/test']">Click for testComponent</a>
    <router-outlet></router-outlet>
    <footer></footer>`,
    directives: [HeaderComponent, ContentComponent, FooterComponent, ROUTER_DIRECTIVES]
})
export class AppComponent { }

我想做的是将路由器插座放在我的 ContentComponent 内部，这样路由器基本上只是将新内容直接转储到我的应用程序的主要区域。当我尝试重写时：
<router-outlet></router-outlet>
作为
<content><router-outlet></router-outlet></content>
路由停止工作，没有错误消息，只是停止。当我使用 devtools 检查它时，我也没有在 DOM 中看到我的 testComponent。所以我想，好吧，我会把路由器插座放在我的 ContentComponent 模板中，如下所示：

import { Component } from '@angular/core';

@Component({
    selector: 'content',
    template: `<router-outlet></router-outlet>`
})
export class ContentComponent { }

但是，当我这样做时，我收到错误消息：找不到默认插座。

我遗漏了一些东西，但由于缺少文档，所以很难弄清楚，我认为会有一种方法可以在 @Routes 中定义我的出口所在的位置，但同样找不到任何文档't for the deprecated-router。希望有人能对此有所了解。提前致谢。

注意：一般的代码评论也会有所帮助，我是 Angular 2 的新手，希望得到建议。

Answer 1

您通过 <content> 标记调用 ContentComponent 的方式使 ContentComponent 成为您的 AppComponent 的子组件，并且您不能将路由器出口放置在子组件的模板中。实现您所追求的目标的一种方法是为 AppComponent 中的 ContentComponent 创建一个默认路由：

@Routes([
    { path: '/', component: ContentComponent }
    { path: '/content', component: ContentComponent }
])

AppComponent 的模板将是：

<header></header>     
<router-outlet></router-outlet>
<footer></footer>

现在您可以像这样在 ContentComponent 中定义嵌套路由：

@Routes([
    { path: 'content1', component: Content1Component }
])
@Component({
    selector: 'content',
    template: `<router-outlet></router-outlet>`
})
export class ContentComponent { }

如果您的页眉组件中有一个菜单并且想要 link 每个嵌套内容，您可以这样做：

<a [routerLink]="['/content', 'content1']">Content1</a>

这会将 Content1Component 加载到 ContentComponent 的 <router-outlet>

Angular 组件模板中有 2 个路由器插座

Angular 2 router-outlet within component template

angular2-template

angular2-routing

angular