angular - 用变量设置ng2组件模板？

Question

是否可以使用输入变量设置 angular2 组件的模板 url？下面的解决方案不起作用，因为step直到组件详细信息下方才定义。但我很好奇这样的事情是否可行？

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

@Component({
    selector: 'demo',
    templateUrl: step;
})
export class demoComponent {
    @Input()
    step: string;
}

然后像这样称呼它：

<demo [step]="path/to/template"></demo>

Answer 1

您可以使用[innerHTML]绑定动态 HTML。此外，Input()在组件渲染之前不会设置。

@Component({
    selector: 'demo',
    templateUrl: `
        <div [innerHTML]="content"></div>
    `;
})
export class demoComponent {
    @Input() step: string;

    private content: string = '';

    ngOnInit () {
        if (this.step === "foo") {
            this.content = "bar";
        }
    }
}

您可能必须根据插入方式将标记显式设置为安全，以便您知道。