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

【问题标题】：Angular2 attribute directive does not work in components rendered in RouterOutlet?Angular2 属性指令在 RouterOutlet 中呈现的组件中不起作用？
【发布时间】：2017-01-29 01:54:28
【问题描述】：

自从最终版本 2.0.2 现在是 2.4.1 以来，我一直在使用 NG2。属性指令在简单的情况下工作，就像在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？

【问题讨论】：

您能看到任何错误吗？
浏览器F12没有错误。但是，我确信指令类的构造函数没有被调用。
它应该在哪里呈现myHighlight。我没有看到它在您的代码中添加任何位置。

标签： javascript html css angular

【解决方案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>

【讨论】：

您使用的语法可能适用于较早的 ng2 预发行版。在最终版本中，此类语法用于其他目的。

【解决方案2】：

@ZZZ，您是否将指令放在声明它的模块的“导出”部分？今天我忘记导出指令时遇到了类似的问题。

祝你好运。

【讨论】：