选择应该用于呈现路由内容的路由器出口

Question

我有一个 nav 组件，它是一个处理一些路由切换的菜单，我遇到的问题是我似乎无法呈现路由的内容，因为我不nav 组件模板中没有 router-outlet。

相反，我想在我的主要应用程序组件 core 中呈现路由的内容，但是我如何告诉 angular 在我的 [=17] 中使用 router-outlet =] 组件而不是我的 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>

列表.videos.component.html:

<h1>Videos list</h1>

正如您所看到的，我希望将底部代码段呈现到中间代码段中，然后中间代码段在 core 组件内部呈现在顶部。

我该怎么做？

底线是我不想在 nav 组件中包含 router-outlet。

Answer 1

看来您需要组件路由器，请考虑以下代码和 Plunker：

@RouteConfig([
  { name: "Home", component: HomeCMP, path: "/home", useAsDefault: true},
  { name: "Videos", component: VideosCMP, path: "/videos/..."}
])

比，在 VideosCMP

@Component({
  selector: 'videos',
  template : `<router-outlet></router-outlet>`,
  directives: [RouterOutlet]
})
@RouteConfig([
  { name: "VideoList" component: VideListCMP, path: "/", useAsDefault: true}
])
export class VideosCMP {}

完整示例： https://plnkr.co/edit/3dnBZEDhpGvVO5aQQswA?p=preview

Answer 2

<router-outlet> 可以命名，aux-routes 添加组件到命名`.

Brandon Roberts 的 Plunker 演示了它

在 src/app.ts 中是一个未命名的 <router-outlet> （主要）用于正常路线和几个命名 <router-outlet name="chat"></router-outlet>.

在 @RouteConfig 中，AuxRoute 由 path: 分配给网点。

AuxRoutes 仍然有限。
如果这不是您需要的，@VladoTesanovic 的回答可能是适合您的方法。

有关新 RC.3 路由器语法的信息，请参阅 Angular2 router in one component。

Answer 3

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

<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>

单击这些路由器链接会更改浏览器中的路由，主要组件中的出口会响应这些路由更改。

您不需要在导航组件中使用路由器插座。如果路由没有呈现到您的主要组件，则可能是您没有在主要组件中包含所需的指令，例如：

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

选择应该用于呈现路由内容的路由器出口

Choose which router-outlet that should be used to render the content of a route

angular

angular2-routing