Question

我有一个通过<router-outlet>加载的组件：

import {Component, OnInit} from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'sandbox',
    templateUrl: 'sandbox.component.html',
    styleUrls: ['sandbox.component.css']
})
export class SandboxComponent implements OnInit {
    @Input() myDirective;

    constructor() {}

    ngOnInit() {}
}

从以下router-link调用<router-outlet>：

<a routerLink="sandbox">{{i18n.sandbox}}</a>

<router-outlet></router-outlet>

Angular正在<sandbox>之后立即呈现<router-outlet>组件：

<a routerLink="sandbox">{{i18n.sandbox}}</a>

<router-outlet></router-outlet>
<sandbox>
    Sandbox Text
</sandbox>

当Angular呈现<sandbox>时，我希望它无条件地将（myDirective）添加到呈现的<sandbox>中的HTML元素，如下所示：

<router-outlet></router-outlet>
<sandbox>
    <div myDirective>
        Sandbox Text
    </div>
</sandbox>

通过在myDirective模板中嵌套<sandbox>作为<div myDirective>的直接子项，我可以在<sandbox>内获得<sandbox>的效果，但是不喜欢仅仅添加<div>来应用指令。

有没有办法无条件地将myDirective添加到从router-link注入/渲染的元素？

如何将指令添加到<router-outlet>之后注入的组件

0 个答案: