twitter-bootstrap-3 - Bootstrap 类不适用于 Angular 2 组件

Question

这是我的第一个 Angular 2 应用程序，不知道为什么没有应用 Bootstrap 类或缺少字形图标？有人可以解释如何在 Angular 2 中使用 Bootstrap 类吗？

这是我的 app.component.ts

import {Component} from 'angular2/core';
import {LikeComponent} from './like.component'

@Component({
    selector: 'my-app',
    template: `
                <like [totalLikes]="tweet.totalLikes" [iLike]="tweet.iLike"></like>
               `,
    directives: [LikeComponent] 
})
export class AppComponent {
    tweet = {
        totalLikes: 10,
        iLike: false
    }
 }

和 like.component.ts:

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'like',
    template: `
    <i
       class="glyphicon glyphicon-heart" 
       [class.highlighted]="iLike"
       (click)="onClick()">
    </i>
    <span>{{ totalLikes }}</span>
    `,
    styles: [`
        .glyphicon-heart {
            color: #ccc;
            cursor: pointer;
        }
        
        .highlighted {
            color: deeppink;
        }   
    `]
})
export class LikeComponent {
    @Input() totalLikes = 0;
    @Input() iLike = false;
    
    onClick(){
        this.iLike = !this.iLike;
        this.totalLikes += this.iLike ? 1 : -1;
    }
}

Answer 1

实际上问题是你没有在主文件中导入 Bootstrap.css 文件，即 index.html 文件，尝试在您的代码运行的 index.html 中使用这个核心 Bootstrap 文件，

在 index.html 中导入此文件:-

<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

这是您的代码的工作示例 Working Plunker