在Angular 2组件中未应用Bootstrap类

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;
    }
}

- CodeBeginner

Answer 1

实际上问题在于您没有在主文件index.html中导入Bootstrap.css文件， 尝试在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" />

这是你代码的实际工作示例： 运行的 Plunker

- Pardeep Jain

Answer 2

注意，Bootstrap 4.0已经取消了对Glyphicons的集成；因此，尽管接受的答案可能仍然有效，但如果您正在使用现在适用于Angular 2的Bootstrap 4.0，则无法帮助您。

- Maksim Gumerov