2016-05-19 35 views
4

这是我的第一个角度2应用程序,不知道为什么bootstrap类不应用或glyphicons丢失?有人可以解释如何在角度2中使用引导类?bootstrap类不适用于角度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; 
 
    } 
 
}

回答

1

其实问题是你没有带在主文件即index.html文件导入Bootstrap.css文件, 尝试使用index.html中这一核心引导文件,你的代码将运行,

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

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

这里是工作的代码Working Plunker

1

注〔实施例,他们引导4.0下降Glyphicons一体化;所以尽管接受的答案可能已经存在,但如果您使用的是引导4.0,现在适用于Angular 2,它将无济于事。