Question

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

当我将angular 2与bootstrap图标结合使用时，无法解析模板。

意外结束标记“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＆amp;在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：

我们认为这里有很多选择结论：


默认html解析器将抛出，如果遇到自动关闭或缺少关闭标记
的自定义元素
将来我们可以轻松使用支持自动关闭自定义元素的自定义模板解析器


推理：


当前的角度html模板是有效的html5片段（即使在区分大小写更改后，它们也会是有效的html5，但是   更高的保真度）

自定义元素规范目前不允许自定义元素自动关闭或无效

我们不应偏离标准

我们关心可用性，这就是为什么我们可以用其他语法创作模板（例如xhtml5，自定义）   东西，玉，等等）

我们不想急于做出违约行为的决定，因为我们处于beta压力之下。在（近）未来放松这条规则   即使是默认的解析器也是可能的，没有突破性的改变（   反转不是）

Angular 2解析模板错误

2 个答案: