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;
  }
}

我让服务器在聆听模式下运行，但它没有向我显示webbrowser上的星标。任何人都可以解释我做错了什么。

这是我的主要内容：

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类时，我倾向于使用[class.CLASSNAME]绑定，例如链接上的active课程。因为在您的情况下，您需要决定两个类，ngClass似乎更方便＆amp;紧凑。

Answer 3

首先，您需要在项目文件夹中安装bootstrap

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已在bootstrap 4 [see]中删除。因此，您可以降级到v3或使用自己的图标字体。

Angular 2 glyphicon没有出现

4 个答案: