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

您可能必须根据插入标记的方式将标记明确设置为安全标记，请注意这一点。

使用变量设置 ng2 组件模板？

Set ng2 component template with variable?

angular2-template

angular2-components

angular