twitter-bootstrap-3 – 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;
    }
}