Question

更新

显然，当使用<template>时，innerHTML的读取将返回小写的所有属性。 Angular2在此测试版9版本中无法理解ngfor或ngif并引发错误。 <script>被视为文本片段而不是DOM，这意味着属性保持不变。

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

Originial

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

HTML CODE

<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 CODE

    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黑客。假设这就是html5规范中添加<template>的原因。为什么会发生这种情况？我该如何解决？

Answer 1

<template>标记仅由Angular 2 structural directives使用（如内置的ngIf，ngFor，ngSwitch等） - 其使用方式与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组件模板？

2 个答案: