angular 2 包含 html 模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40316341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular 2 include html templates
提问by Tobias Koller
in angular 2 I need to create a large html-template with redundant parts. Therefore I want to create multiple html-templates and put them together by including them in the main html-file (like ng-include in angular1)
在 angular 2 中，我需要创建一个带有冗余部分的大型 html 模板。因此，我想创建多个 html 模板并通过将它们包含在主 html 文件中来将它们组合在一起（如 angular1 中的 ng-include）
But how can I include sub-templates in the main-template?
但是如何在主模板中包含子模板？
example:
例子：
<!-- test.html -->
<div>
this is my Sub-Item
<!-- include sub1.html here-->
</div>
<div>
this is second Sub-Item
<!-- include sub2.html here-->
</div>
-
——
<!-- sub1.html -->
<div>
<button>I'am sub1</button>
</div>
-
——
<!-- sub2.html -->
<div>
<div>I'am sub2</div>
</div>
采纳答案by Aswin KV
You can create components like sub1 sub2 etc. And On those child components add these html files as template .
您可以创建 sub1 sub2 等组件。在这些子组件上添加这些 html 文件作为模板。
On main html call the component selectors respectively. It will work
在主 html 上分别调用组件选择器。它会工作
回答by micronyks
Let me tell you first of all that ng-includefrom Angular1.xis not supported by Angular2 so obviously $Compileis not present in Angular2. So, you can go ahead with CRF-ComponentFactoryResolveras shown here to add HTML dynamically with angular context.
首先让我的告诉你，ng-include从Angular1.x没有被Angular2支持这样显然$Compile是不存在的Angular2。因此，您可以CRF-ComponentFactoryResolver按照此处所示继续使用角度上下文动态添加 HTML。
DEMO--(CFR): https://plnkr.co/edit/YdRlULhWQR3L3akAr2eb?p=preview
演示--（CFR）：https: //plnkr.co/edit/YdRlULhWQR3L3akAr2eb?p=preview
If your HTML piece has angular context, you should use CFR-ComponentFactoryResolver.
如果您的 HTML 片段具有角度上下文，则应使用CFR-ComponentFactoryResolver.
As in sub1.html, you have button, you might want to click it and fire its click event. This can be achieved with CFRas shown below,
在 中sub1.html，您button可能想要单击它并触发它的单击事件。这可以通过CFR如下所示来实现，
You can do lot with CRF. This is probably the easiest example.
你可以做很多事情CRF。这可能是最简单的例子。
@Component({
selector: 'my-app',
template: `
<button (click)="addComponents()">Add HTML (dynamically using CRF)</button>
<h1>Angular2 AppComponent</h1>
<hr>
<div>
<h5>sub1.html goes here</h5>
<div class="container">
<template #subContainer1></template>
</div>
</div>
<hr>
<h5>sub2.html goes here</h5>
<div class="container">
<template #subContainer2></template>
</div>
`,
})
export class App {
name:string;
@ViewChild('subContainer1', {read: ViewContainerRef}) subContainer1: ViewContainerRef;
@ViewChild('subContainer2', {read: ViewContainerRef}) subContainer2: ViewContainerRef;
constructor(
private compFactoryResolver: ComponentFactoryResolver
) {
this.name = 'Angular2'
}
addComponents() {
let compFactory: ComponentFactory;
compFactory = this.compFactoryResolver.resolveComponentFactory(Part1Component);
this.subContainer1.createComponent(compFactory);
compFactory = this.compFactoryResolver.resolveComponentFactory(Part2Component);
this.subContainer2.createComponent(compFactory);
}
}
}
