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

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

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

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

然后像这样称呼它：

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

---

您可以使用

[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";
        }
    }
}

@组件({
选择器：“演示”，
模板URL:`
`;
})
导出类demoComponent{
@Input（）步骤：字符串；
私有内容：字符串=“”；
恩戈尼尼特（）{
如果（this.step==“foo”）{
this.content=“bar”；
}
}
}

---

根据插入标记的方式，您可能必须显式地将标记设置为安全的，这取决于您的意识。

您可以使用

[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";
        }
    }
}

@组件({
选择器：“演示”，
模板URL:`
`;
})
导出类demoComponent{
@Input（）步骤：字符串；
私有内容：字符串=“”；
恩戈尼尼特（）{
如果（this.step==“foo”）{
this.content=“bar”；
}
}
}

---

根据插入标记的方式，您可能必须明确地将标记设置为安全的，这取决于您的意识。

这样做的目的是什么？不，它不起作用。它在编译时用于生成bundle，然后将不会定义

step

。@Harangue我正在编写一个教程应用程序，每个步骤都有大量已解析的git diff文件。我希望能够引用

标记并显示正确的静态html（呈现的代码片段）。但是，我希望所有代码段都能执行一些逻辑。@ritz078是否有类似的情况，例如，有一个带有1个数据绑定的空模板，然后将所有静态html传递给该模板？这样做的目的是什么？不，它不起作用。它在编译时用于生成bundle，然后将不会定义

step

。@Harangue我正在编写一个教程应用程序，每个步骤都有大量已解析的git diff文件。我希望能够引用

标记并显示正确的静态html（呈现的代码片段）。但是，我希望所有代码段都能执行一些逻辑。@ritz078是否有类似的情况，例如，有一个带有1个数据绑定的空模板，然后将所有静态html传递给该模板？仅此而已，因为通常存在错误的期望。Angular不会处理以这种方式添加的HTML，除非进行一些清理。它只是将其传递给浏览器。无论选择器是否匹配，都不会实例化任何组件或指令，也不会计算任何绑定（

[prop]=“xxx”

），也不会添加任何事件处理程序（

（event）=“handler（$event）”

）。与此相关，我如何“读取”域上提供的文件并将

this.contents

设置为与其内容相等？听起来像是一个真正的NOOB问题，但它是一个HTTP调用，还是我只使用一个web地址？只是提一提，因为人们常常有错误的期望。Angular不会处理以这种方式添加的HTML，除非进行一些清理。它只是将其传递给浏览器。无论选择器是否匹配，都不会实例化任何组件或指令，也不会计算任何绑定（

[prop]=“xxx”

），也不会添加任何事件处理程序（

（event）=“handler（$event）”

）。与此相关，我如何“读取”域上提供的文件并将

this.contents

设置为与其内容相等？听起来像是一个真正的NOOB问题，但它是一个HTTP调用，还是我只使用一个web地址？