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>

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

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

import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";

...

@Component({
    directives: [ROUTER_DIRECTIVES, ...]
})

Plunker：https://plnkr.co/edit/P6Bkwy?p=info

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

Answer 2

它接缝需要组件路由器，请考虑此代码和Plunker：

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

比，在VideosCMP中

ffmpeg -formats | grep segment

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

Answer 3

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

选择应该用于呈现路径内容的路由器插座

3 个答案: