用变量设置ng2组件模板？答案

【问题标题】：Set ng2 component template with variable?用变量设置ng2组件模板？
【发布时间】：2016-08-08 22:07:16
【问题描述】：

是否可以使用输入变量设置 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>

【问题讨论】：

这样做的目的是什么？
不，这行不通。它在编译时用于制作捆绑包，然后step 将不会被定义。
@Harangue 好吧，我正在编写一个教程应用程序，并且每个步骤都有大量已解析的 git diff 文件。我希望能够引用 <codestep [step]="2.1"> 标记并显示正确的静态 html（渲染代码 sn-p）。但是，我希望所有 sn-ps 都执行一些逻辑。
@ritz078 有没有类似的东西，例如只有一个带有 1 个数据绑定的空模板，然后将所有静态 html 传递给那个？

标签： angular angular2-template angular2-components

【解决方案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";
        }
    }
}

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

【讨论】：

只是提一下，因为经常有错误的期望。除了一些清理之外，Angular 不会处理以这种方式添加的 HTML。它只是将它传递给浏览器。无论选择器是否匹配，都不会实例化任何组件或指令，不会评估绑定 ([prop]="xxx")，也不会添加事件处理程序 ((event)="handler($event)")。
与此相关，我将如何“读取”在我的域上提供的文件并将this.contents 设置为等于它的内容？听起来像一个真正的 NOOB 问题，但它是一个 HTTP 调用，还是我只使用一个网址？