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组件模板？

1 个答案: