这是我的第一个angular 2应用,不知道为什么不应用bootstrap类或缺少glyphicons吗?有人可以解释一下如何在angular 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;
}
}
最佳答案
实际上,问题是您没有在主文件(即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的工作示例
关于twitter-bootstrap-3 - 引导类未在 Angular 2组件中应用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37334050/