Angular 2 Glyphicon没有显示

Question

试图在主页上呈现一个星形图标，但它没有显示出来（这是应该在页面上唯一的东西）。 很新，所以我还在学习。 请原谅这个问题的绝对愚蠢。

因此，我创建了以下名为AppComponent的组件：

import {Component} from '@angular/core';
import {Input} from '@angular/core';

@Component({
  selector: 'my-app',
  template:  `<i class="glyphicon" 
        [class.glyphicon-star]="isFavorite" 
        [class.glyphicon-star-empty]="!isFavorite"
        (click)="onClick()
        "></i>`
})

export class AppComponent  {
  @Input() isFavorite = false;

  onClick(){
    this.isFavorite = !this.isFavorite;
  }
}

我的服务器在侦听模式下运行，但是没有向我显示网络浏览器上的星星。 谁能解释我在做什么错。

这是我的main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

这是我的app.module.ts类：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],

  declarations: [
    AppComponent
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

关于我要去哪里的想法，建议和想法？

Answer 1

检出您的CSS定义：从CDN加载，加载全局CSS，...

如我所见，您使用的是Bootstrap Glyphicon，如果您使用的是CDN，只需将CDN链接添加到index.html。 否则，如果加载本地CSS，则还需要提供fonts目录。 顺便说一句，

(click)="onClick()
    "

改成：

(click)="onClick()"

Answer 2

您是否尝试过使用ngClass ？

@Component({
  selector: 'my-app',
  template:  `<i class="glyphicon"
        [ngClass]="isFavorite ? 'glyphicon-star' : 'glyphicon-star-empty'"
        (click)="onClick()"></i>`
})
export class AppComponent  {
  @Input() isFavorite = false;

  onClick(){
    this.isFavorite = !this.isFavorite;
  }
}

当我需要切换UNIQUE类 （例如链接上的active类）时，我倾向于使用[class.CLASSNAME]绑定。 由于在您的情况下，您需要在两个类之间进行选择 ，因此ngClass看起来更方便，更紧凑。

Answer 3

首先，您需要在项目文件夹中安装引导程序

npm install bootstrap --save

然后在您的style.css文件中导入bootstap css

@import '~bootstrap/dist/css/bootstrap.css'

现在，您可以在组件内部的模板中添加简单的boostrap类

<span class="glyphicon" [class.glyphicon-star]="isFavorite" [class.glyphicon-star-empty]="!isFavorite" (click)="onclick()"></span>

Answer 4

对于将来使用bootstrap 4并遇到glyphicon的读者 ：

glyphicon已在引导程序4中删除[ 请参见 ]。 因此，您可以降级到v3或使用自己的图标字体。