路由器指令在两个地方为同一目的

根组件

import { Component } from "angular2/core"; 
import { TopNavigationComponent } from "./shared/navigation.component"; 
import { ArcListComponent } from "./arc/arc-list.component"; 
import { ArcNewItemComponent } from "./arc/arc-new-item.component"; 
import { RouteConfig } from "angular2/router"; 
import { ROUTER_DIRECTIVES } from "angular2/router"; 
@Component({ 
    selector: "ng2-app", 
    template: ` 
    <section class="jumbotron full-height"> 
     <top-navigation></top-navigation> 
     <div class="container"> 
     <router-outlet></router-outlet> 
     </div> 
    </section> 
    `, 
    directives: [TopNavigationComponent, ArcListComponent,ROUTER_DIRECTIVES] 
}) 

@RouteConfig([ 
    {path: "/", name: "Root", component: ArcListComponent, useAsDefault: true}, 
    {path: "/new", name: "New-item", component: ArcNewItemComponent} 
]) 

export class RootComponent { 

}

顶级的导航组件

import { Component } from "angular2/core"; 
import { ROUTER_DIRECTIVES } from "angular2/router"; 

@Component({ 
    selector: "top-navigation", 
    templateUrl: "dev/shared/navigation.template.html", 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class TopNavigationComponent { 

}

navigation.template

<nav class="navbar navbar-default"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" [routerLink]="['Root']">Angular2Arc</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a [routerLink]="['Root']">Home</a></li> 
     <li><a [routerLink]="['New-item']">Add New Resource</a></li> 
     <li><a href="#">Github</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav>

我的问题是，虽然这工作，你能解释为什么我需要把路由器指令放在两个地方，如果有更好的方法来做到这一点？

来源

2016-03-08 Petros Kyriakou

将ROUTER_DIRECTIVES放在两个地方的原因是，您在* RootComponent *中使用* TopNavigationComponent *中的'routerLink'和'routerOutlet'。您可以像'angular2/router''中的import {RouteConfig，RouterOutlet}一样单独导入它们。 [检查这个详细的例子]（https://angular.io/docs/ts/latest/guide/router.html） – Bhavik

正如@Bhavik所说，ROUTER_DIRECTIVES在每次使用RouterLink或RouterOutlet时都是必需的（您也可以指定它们中的每一个）。

检查Router

export const ROUTER_DIRECTIVES: any[] = CONST_EXPR([RouterOutlet, RouterLink]);

显然将它每次您使用的是他们中的一个的源代码是烦人，所以你可以把它简单的使用PLATFORM_DIRECTIVES。通过这种方式，您可以在应用程序中添加一次，并且可以在整个应用程序中使用它。

bootstrap(App, [ 
    provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true}) 
]);

注意，有一个issue开放提议增加ROUTER_DIRECTIVES到ROUTER_PROVIDERS，所以我们甚至可以跳过上述解决方案建议。这将使设置路由器变得更容易。

来源

2016-03-08 23:38:32

有趣的感谢你！ –

路由器指令在两个地方为同一目的

回答

相关问题