为什么我不能使用 <template> 作为 angular2 组件模板？

Question

更新

显然，当使用 <template> 时， innerHTML 的读数将 return 所有属性都变成小写。从这个 beta 9 版本开始，Angular2 将无法理解 ngfor 或 ngif 并抛出错误。 <script> 被视为文本片段而不是 DOM，这意味着属性保持原样。

这里： https://groups.google.com/forum/#!topic/angular/yz-XdYV2vYw

原创

采用以下 html 和 angular2 beta 9 组件：

HTML 代码

<my-page>Loading...</my-page>

<script type="text/html" id="my-component-template1">
    <select [(ngModel)]="SelectedType">
        <option *ngFor="#someType of MyTypes" [selected]="SelectedType == someType" [value]="someType">{{someType}}</option>
    </select>
</script>

<template id="my-component-template2">
    <select [(ngModel)]="SelectedType">
        <option *ngFor="#someType of MyTypes" [selected]="SelectedType == someType" [value]="someType">{{someType}}</option>
    </select>
</template>

JS代码

    var myComponent =
        ng.core.Component({
            selector: 'my-page',

            //complains if i use #my-component-template2
            template: document.querySelector('#my-component-template1').innerHTML 
        })
        .Class({
            constructor: function () {
                var self = this;

                self.MyTypes = ['first', 'second'];
                self.SelectedType = self.MyTypes[0];
            }
        });

    document.addEventListener('DOMContentLoaded', function () {
        ng.platform.browser.bootstrap(myComponent);
    });

如果我使用 my-component-template1 它工作正常，但如果我选择 my-component-template2 它会抱怨 ngModel 和 ngForOf 不是已知的本地属性。

我测试了一个 div 作为模板，显然它也不会工作，同样的错误。所以问题是，如果模板是 DOM 的一部分，为什么它会中断？此外，我真的不想使用 script text/html hack。假设这就是在 html5 规范中添加 <template> 的原因。为什么会发生这种情况，我该如何解决？

Answer 1

<template> 标签仅被 Angular 2 structural directives (like the built-in ngIf, ngFor, ngSwitch, etc) - its use is somehow similar with the html5 specification 使用，因为它定义了存储以供后续使用的内容。

结构指令前面的 * 只是语法糖，它允许我们跳过 <template> 标记并直接关注我们包含的 HTML 元素，不包括，或重复 - 您可以阅读更多相关信息 here。

来自 Angular 2 个文档的示例展示了这一点：

<!-- Examples (A) and (B) are the same -->
<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
  Our heroes are true!
</p>

<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>

目前，我不确定是否有像 AngularJS 1 中那样定义内联 Angular 2 HTML 模板的方法。您的 hack，正如你所说，似乎完成了它的工作。

Answer 2

Angular 处理 <template> 标签本身，而不是简单地将它们添加到 DOM。如果您将 TemplateRef 注入到组件的构造函数中，您应该获得对模板的引用。

class MyComponent {
  constructor(private tmplRef:TemplateRef) {

  }
}

为什么我不能使用 <template> 作为 angular2 组件模板？

Why can't I use <template> as an angular2 component template?

javascript

templates

angular2-directives

angular2-template

angular