Angular 2 解析模板错误

Question

我是 angular 2 的新手，我使用的是 angular-rc-4 版本。

当我将angular 2 与bootstrap 图标组合在一起时，无法解析模板。

Unexpected closing tag "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 并且混淆了 ngFor 指令，其中 li 已经结束。

模板

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

Answer 2

自闭合元素未被 Angular 2 和 not planned on be implemented 正确解析。

这就是您必须正确关闭所有标签的原因：

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

来自Github Issue:

we considered many options are here is the conclusion:

the default html parser will throw if it comes across a custom element that is self-closing or missing closing-tag

in the future we will make it easy to use custom template parsers that can support self-closing custom elements

reasoning:

current angular html templates are valid html5 fragments (even after the case-sensitivity change, they will be valid html5, but with higher fidelity)

custom element spec currently doesn't allow custom elements to be self-closing or void

we should not deviate from standards

we care about usability though and that's why we'll make it possible to author templates in other syntaxes (e.g. xhtml5, custom stuff, jade, whatever)

we don't want to rush the decision on the default behavior since we are under beta pressure. relaxing this rule in the (near) future even for the default parser is possible without a breaking change (the reverse is not)

Angular 2 解析模板错误

Angular 2 parsing template error

typescript

twitter-bootstrap-3

angular2-template

angular