为什么glyphicon没有显示? [英] Why glyphicon is not showing?
本文介绍了为什么glyphicon没有显示?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经在我的角度项目中安装了bootstrap。在package.json中我有bootstrap:^ 3.3.7
在组件中。
从'@ angular / core'导入{Component,OnInit,Input};
@Component({
selector:'zippy',
templateUrl:'。/ zyppy.component.html',
styleUrls:['。/ zyppy。 component.css']
})
导出类ZippyComponent {
@Input('title')title:string;
isExpanded:boolean;
toggle(){
this.isExpanded =!this.isExpanded;
}
}
在html文件中
< div class = 活泼 >
< div
class =zippy-heading
[class.expanded] =isExpanded
(click)=toggle()
>
{{title}}
< span class =glyphicon
[ngClass] ={
'glyphicon-chevron-up':isExpanded,
' glyphicon-chevron-down':! isExpanded
}
>< / span>
< / div>
< div * ngIf =isExpandedclass =zippy-body>
< ng-content>< / ng-content>
< / div>
< / div>
但是glyphicon没有显示?
我尝试了什么:
我试图将 styles.css
添加到
styleUrls:['。/ zippy.component.css','。/ app / styles.css']
然后错误是:
编译失败。
./src/app/zippy/zippy.component.ts
找不到模块:错误:无法解析'C:\中的'./app/styles.css' Demo \Angular\tweet\src\app\zippy'
@ ./src/app/zippy/zippy.component.ts 27:51-78
@ ./src/app /app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server / client?http:// localhost:4200 ./src/main.ts$p $ p>解决方案
我必须添加行@import~bootstrap / dist / css / bootstrap.css;
进入style.css
项目文件。
我添加了@ import~bootstrap / dist / css / bootstrap.css;以及
但它仍然没有显示。
I have installed bootstrap in my angular project. In package.json I have
"bootstrap":"^3.3.7"
In the component.
import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'zippy', templateUrl: './zippy.component.html', styleUrls: ['./zippy.component.css'] }) export class ZippyComponent { @Input('title') title: string; isExpanded: boolean; toggle() { this.isExpanded = !this.isExpanded; } }
In html file
<div class="zippy"> <div class="zippy-heading" [class.expanded]="isExpanded" (click)="toggle()" > {{ title }} <span class="glyphicon" [ngClass]="{ 'glyphicon-chevron-up': isExpanded, 'glyphicon-chevron-down': !isExpanded }" ></span> </div> <div *ngIf="isExpanded" class="zippy-body"> <ng-content></ng-content> </div> </div>
But the glyphicon is not showing?
What I have tried:
I tried to add thestyles.css
intostyleUrls:['./zippy.component.css','./app/styles.css']
Then the error is:
Failed to compile. ./src/app/zippy/zippy.component.ts Module not found: Error: Can't resolve './app/styles.css' in 'C:\Demo\Angular\tweet\src\app\zippy' @ ./src/app/zippy/zippy.component.ts 27:51-78 @ ./src/app/app.module.ts @ ./src/main.ts @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts解决方案I have to add the line@import "~bootstrap/dist/css/bootstrap.css";
intostyle.css
file of the project.
I have added the @import "~bootstrap/dist/css/bootstrap.css"; as well
but it still does not show.
这篇关于为什么glyphicon没有显示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文