Question

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

这是我现在所拥有的＆＃34;工作＆＃34;

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中定义我的出口，但是再也找不到任何文档＃39; t为弃用路由器。希望有人可以对此有所了解。提前谢谢。

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

中

组件模板中的Angular 2 router-outlet

1 个答案: