Question

自最终版本2.0.2以来我一直在使用NG2 2.4.1。属性指令在简单的情况下工作，就像https://angular.io/docs/ts/latest/guide/attribute-directives.html教程中的内容一样，我能找到的所有教程也只是简单地呈现了在app.component.html中立即声明的指令。但是，我在app.component.html中定义的路由器插座中呈现的组件如下：

    <nav>
    <a routerLink="/" routerLinkActive="active">  </a>
</nav>
<div class="jumbotron">
    <div class="container">
        <div class="col-sm-12">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

我在app.module.ts中声明了该指令：

@NgModule({
...
    declarations: [

        //** Root level components
        AppComponent,

        HomeComponent,
...
        HighlightDirective,

    ],

带有路由的功能模块在app-routing.module.ts中声明：

const routes: Routes = [
    { path: 'login', component: LoginComponent },

    { path: 'ml_payment', loadChildren: 'app/payment/payment.module#PaymentModule', canActivate: [AuthGuard] },
    { path: 'account', loadChildren: 'app/account/account.module#AccountModule', canActivate: [AuthGuard, AdminGuard] },
    { path: 'wip', component: WIPComponent },

    { path: '', component: HomeComponent, canActivate: [AuthGuard] },
    { path: '**', component: NotFoundComponent },

];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

渲染嵌套组件时，NG2运行时不会将myHighlight渲染到HTML的相应样式标记中。我只是想知道我是否错过了某些东西或NG2自定义属性指令不适用于RouterOutlet？

Answer 1

使用routerLinkActive作为[routerLinkActive] =“['active']”

   <nav>
    <a routerLink="/" [routerLinkActive]="['active']">  </a>
</nav>
<div class="jumbotron">
    <div class="container">
        <div class="col-sm-12">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

Answer 2

@ZZZ，您是否已将该指令放入＆＃34; exports＆＃34;宣布它的模块部分？今天，当我忘记导出指令时，我遇到了类似的问题。

祝你好运。

Angular2属性指令在RouterOutlet中呈现的组件中不起作用？

2 个答案: