组件模板中的Angular 2 router-outlet

Question

我一直在玩Angular 2中的路线,但我遇到了一个我无法找到答案的问题.我的路线"工作",但不是我希望的方式.我试图使用这个,就像你使用角度1的ng-view,我的页眉和页脚永远不会改变,当我的网址改变时,新的"东西"放在我的内容中.

这就是我现在所拥有的"工作"

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中定义我的插座,但是再次找不到任何不适合弃用的文档-路由器.希望有人可以对此有所了解.提前致谢.

注意:一般代码批评也会有所帮助,我对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 { }

如果您的标题组件中有一个菜单并想要链接到每个嵌套内容,您可以这样做:

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

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