Angular 2 个字形未显示

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 class:

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 link 添加到 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 class 时，我倾向于使用 [class.CLASSNAME] 绑定，例如active class 在 link 上。因为在你的情况下，你需要在两个classes之间做出决定，ngClass似乎更方便和紧凑。

Answer 3

首先你需要在你的项目文件夹中安装bootstrap

npm install bootstrap --save

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

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

现在您可以在组件内的模板中简单地添加 boostrap class

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

Answer 4

未来 reader 使用 bootstrap 4 并且 glyphicon 有问题：

glyphicon 已在 bootstrap 4 [see] 中删除。所以你可以降级到 v3 或者使用你自己的图标字体。

Angular 2 个字形未显示

Angular 2 glyphicon not showing up

angular

angular-components