2016-05-19 4 views
4

これは私の最初のアングル2アプリケーションです。なぜブートストラップクラスが適用されないのか、グリフコンがないのか分かりません。誰かが角度2でブートストラップクラスを使う方法を説明できますか?アングル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

注exmapleを働いている、彼らは、ブートストラップ4.0でGlyphiconsのときの積分を落としました。したがって、許容される答えはおそらく立っていますが、ブートストラップ4.0を使用している場合は助けになりません。現在は角2の現在です。

関連する問題