我有一个 nav
组件是一个处理一些路由切换的菜单,我遇到的问题是我似乎无法呈现路由的内容,因为我没有 router-outlet
在 nav
内组件模板。
相反,我想在我的主要应用程序组件中呈现路线的内容 core
, 但我如何告诉 Angular 使用 router-outlet
在我的 core
组件而不是我的 nav
组件?
自从我的[routerLink]
在此模板内:
nav.component.html:
<nav class="nav-wrapper" [class.is-toggled]="isToggled" [class.is-hidden]="!isToggled">
<ul class="nav-links">
<li class="nav-link" *ngFor="#link of links">
<a [routerLink]="link.href">
<div class="label-wrapper">{{link.label}}</div>
<div class="icon-wrapper"><i class="{{link.icon}}"></i></div>
</a>
</li>
</ul>
</nav>
它不想将路由渲染到 core
中组件:
core.component.html:
<!-- The menu -->
<nav-list></nav-list>
<!-- The router-outlet which should render the videos component -->
<router-outlet></router-outlet>
videos.component.html:
<h1>My videos</h1>
<!-- This should render the child views of the videos component -->
<router-outlet></router-outlet>
list.videos.component.html:
<h1>Videos list</h1>
正如您所看到的,我希望将底部代码段呈现到中间代码段中,然后中间代码段呈现在顶部,在 core
中。成分。
我该怎么做?
底线是我不想拥有 router-outlet
在nav
组件。
最佳答案
所以我有一个类似的设置,其中有一个主要布局组件:
<shellheader (menuToggle)="onMenuToggle($event)"></shellheader>
<section id="main">
<navigation [menuToggled]="menuToggled"></navigation>
<section id="content">
<div class="container">
<div class="block-header">
<h2>Header</h2>
<router-outlet></router-outlet>
</div>
</div>
</section>
</section>
<shellfooter></shellfooter>
主要布局组件代码:
@Component({
templateUrl: "app/shell/main-layout.component.html",
directives: [ROUTER_DIRECTIVES, NavigationComponent, HeaderComponent, FooterComponent]
})
@RouteConfig([
{ path: "/dashboard/...", name: "Dashboard", component: DashboardComponent, useAsDefault: true }
])
export class MainLayoutComponent {
public menuToggled: boolean;
public onMenuToggle(event:boolean) {
this.menuToggled = event;
}
}
在我的导航组件中,我有一些路由器链接(没有路由器导出,只使用 routerlink 指令,没有定义子路由):
<ul class="main-menu">
<li *ngFor="#navItem of navItems">
<a [routerLink]="navItem.route">
<i *ngIf="navItem.icon" class="{{navItem.icon}}"></i>
{{ navItem.text }}
</a>
</li>
</ul>
单击这些路由器链接会更改浏览器中的路由,主组件中的导出会响应这些路由更改。
你不应该需要在你的导航组件中有 router-outlet 。如果路由没有呈现到您的主要组件,则可能是您没有在主要组件中包含所需的指令,例如:
import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";
...
@Component({
directives: [ROUTER_DIRECTIVES, ...]
})
关于angular - 选择应该用于呈现路由内容的路由器导出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35093298/