angular - 选择应该用于呈现路由内容的路由器导出

Question

我有一个 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组件。

Answer 1

所以我有一个类似的设置，其中有一个主要布局组件:

<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, ...]
})

笨蛋:https://plnkr.co/edit/P6Bkwy?p=info

更多信息:https://angular.io/docs/ts/latest/guide/router.html