组件模板中的Angular 2 router-outlet

发布时间：2020-12-17 17:26:28 所属栏目：安全来源：网络整理

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

我一直在玩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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!