twitter-bootstrap-3 - 引导类未在 Angular 2组件中应用

这是我的第一个angular 2应用，不知道为什么不应用bootstrap类或缺少glyphicons吗？有人可以解释一下如何在angular 2中使用引导类吗？

这是我的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;
    }
}

最佳答案

实际上，问题是您没有在主文件(即index.html文件)中导入Bootstrap.css文件，
尝试在将要运行代码的index.html中使用此核心引导文件，

将此文件导入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的工作示例

关于twitter-bootstrap-3 - 引导类未在 Angular 2组件中应用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37334050/