我一直在玩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 { }
我想要做的是将路由器插座放在我的ContentComponentso内部,基本上路由器只是将新的东西直接转储到我的应用程序的主要区域.当我尝试重写时：
<路由器出口>< /路由器出口>
如
<内容><路由器出口>< /路由器出口>< /内容>
路由停止工作,没有错误消息,只是停止.当我用devtools检查它时,我也没有在DOM中看到我的testComponent.所以我想,我会将路由器插座放在我的ContentComponent的模板中,如下所示：
import { Component } from '@angular/core';
@Component({
selector: 'content',template: `<router-outlet></router-outlet>`
})
export class ContentComponent { }
但是,当我这样做时,我收到错误消息：找不到默认插座.
我遗漏了一些东西,但缺乏文档使得很难弄明白,我认为有一种方法可以在@Routes中定义我的插座,但是再次找不到任何不被弃用的文档-路由器.希望有人可以对此有所了解.提前致谢.
注意：一般代码批评也会有所帮助,我对Angular 2很新,并且很喜欢这个建议.
解决方法
通过< content>调用ContentComponent的方式tag使ContentComponent成为AppComponent的子项,并且不能将router-outlet放在子组件的模板中.实现目标的一种方法是在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>
