用变量设置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";
        }
    }
}

你可能需要根据你插入它的方式显式地将标记设置为安全的，这样你就知道了。