Question

这是我的第一个有角度的2应用程序，并且不知道为什么没有应用bootstrap类或者缺少glyphicons？有人可以解释如何在角度2中使用bootstrap类吗？

这是我的app.component.ts

＆＃13;

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

＆＃13;

和like.component.ts：

＆＃13;

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

＆＃13;

Answer 1

实际问题是你没有在主文件中输入Bootstrap.css文件，即index.html文件，尝试在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

Answer 2

注意，他们在bootstrap 4.0中放弃了Glyphicons集成;因此，虽然接受的答案可能已经存在，但如果您使用的是bootstrap 4.0，那么它将无济于事，现在它已成为Angular 2的当前版本。

bootstrap类未应用于角度2组件

2 个答案: