角2解析模板错误

Question

我刚接触到角2，我使用的是角-rc-4版本。

当我结合角度2和引导图标，模板不能被解析。

意料之外的结尾标签"li“

谢谢你的帮忙

下面是我的代码：

import { Component } from '@angular/core';
import { CourseService } from './course.service';
import { AutoGrowDirective } from './auto-grow.directive';

@Component({
    selector: 'courses',
    template: `
        <h2>Courses</h2>
        {{ title }}
        <input autoGrow [(ngModel)]="title"/>
        <input type="button" (click)="title = ''" value="Clear">
        Preview
        {{ title }}
        <ul>
            <li *ngFor="let course of courses">
                <i class="glyphicon glyphicon-star" />
            </li>
        </ul>

        <div (click)="onDivClick()">
            <button class="btn btn-primary" [class.active]="isActive" (click)="onClick($event)">Create</button>
        </div>
        `,
    providers: [CourseService],
    directives: [AutoGrowDirective]
})
export class CoursesComponent {
    title = 'The title of courses page';
    courses: string[];
    isActive = true;

    constructor(courseService: CourseService) {
        this.courses = courseService.getCourses();
    }

    onClick($event){
        $event.stopPropagation();
        console.log('Clicked', $event);
    }
    onDivClick($event){
        console.log('On Div Clicked', $event);
    }
}

Answer 1

i标记不是自动关闭标记，您必须手动关闭它。您忘了关闭<i>标记，它也破坏了li &在li已经结束的地方混淆了ngFor指令。

模板

<ul>
    <li *ngFor="let course of courses">
        <i class="glyphicon glyphicon-star"></i>
    </li>
</ul>

Answer 2

角2和未计划执行不能正确地解析自闭合元件.

这就是为什么必须正确关闭所有标记的原因：

<li *ngFor="let course of courses">
    <i class="glyphicon glyphicon-star"></i>
</li>

来自Github问题 的

我们考虑了许多选择，这里的结论是：

• 默认的html解析器将抛出，如果它遇到一个自定义元素，即自关闭或缺少关闭标记。
• 在未来，我们将使使用自定义模板解析器变得更容易，这些解析器可以支持自关闭自定义元素。

推理：

• 当前的角html模板是有效的html5片段(即使在区分大小写的情况下，它们将是有效的html5，但具有更高的保真度)
• 自定义元素规范目前不允许自定义元素为自关闭或无效。
• 我们不应偏离标准。
• 不过，我们关心可用性，这就是为什么我们可以在其他语法(如xhtml5、自定义材料、玉器等)中创建模板。
• 我们不想仓促决定默认行为，因为我们是在贝塔压力之下。在不久的将来放松这条规则，即使是默认的解析器也是可能的，而不需要改变(相反的情况并非如此)。