Twitter bootstrap 3 角度2解析模板错误

Twitter bootstrap 3 角度2解析模板错误,twitter-bootstrap-3,typescript,angular,angular2-template,Twitter Bootstrap 3,Typescript,Angular,Angular2 Template,我是angular 2的新手,我正在使用angular-rc-4版本 当我将angular 2与引导图标结合使用时,无法解析模板 意外结束标记li 谢谢你的帮助 下面是我的代码: import { Component } from '@angular/core'; import { CourseService } from './course.service'; import { AutoGrowDirective } from './auto-grow.directive'; @Compon

我是angular 2的新手,我正在使用angular-rc-4版本

当我将angular 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);
    }
}
i标记不是自动关闭标记,您必须手动关闭它。你们忘了关闭标签,这也把李彦宏搞砸了&混淆了李彦宏结束的指令

模板

i标记不是自动关闭标记,您必须手动关闭它。你们忘了关闭标签,这也把李彦宏搞砸了&混淆了李彦宏结束的指令

模板


Angular 2和未正确解析自动关闭元素

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

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

我们考虑了许多选择,结论如下:

如果遇到自关闭或缺少关闭标记的自定义元素,默认html解析器将抛出 在将来,我们将使能够支持自动关闭自定义元素的自定义模板解析器易于使用 理由:

当前的angular html模板是有效的html5片段,即使在区分大小写更改之后,它们仍然是有效的html5,但是 高保真度 自定义图元规范当前不允许自定义图元自动关闭或无效 我们不应该偏离标准 但我们关心可用性,这就是为什么我们可以用其他语法(如xhtml5、自定义语法)编写模板 东西,翡翠,随便什么 我们不想匆忙决定默认行为,因为我们正处于测试压力之下。在不久的将来放宽这一规定 即使对于默认解析器,也可以在不中断更改 反之亦然
Angular 2和未正确解析自动关闭元素

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

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

我们考虑了许多选择,结论如下:

如果遇到自关闭或缺少关闭标记的自定义元素,默认html解析器将抛出 在将来,我们将使能够支持自动关闭自定义元素的自定义模板解析器易于使用 理由:

当前的angular html模板是有效的html5片段,即使在区分大小写更改之后,它们仍然是有效的html5,但是 高保真度 自定义图元规范当前不允许自定义图元自动关闭或无效 我们不应该偏离标准 但我们关心可用性,这就是为什么我们可以用其他语法(如xhtml5、自定义语法)编写模板 东西,翡翠,随便什么 我们不想匆忙决定默认行为,因为我们正处于测试压力之下。在不久的将来放宽这一规定 即使对于默认解析器,也可以在不中断更改 反之亦然
完全正确唯一正确称为void元素的“自动关闭”标记符合规范:区域、基础、br、col、嵌入、hr、img、输入、keygen、link、meta、param、source、track、wbrSpot等。唯一正确称为void元素的“自动关闭”标记符合规范:区域、基、br、col、嵌入、hr、img、输入、键根、链接、元、参数、源、跟踪、wbrWell捕获和引用的github线程是信息性的,共享赞赏+1:捕获和引用的github线程是信息性的,共享赞赏+1: