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

を。誰でも私が間違っていることを説明することはできますか？ここ

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

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

platformBrowserDynamic().bootstrapModule(AppModule); 

と私のapp.module.tsクラスである：ここで

は私main.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からの負荷は、あなただけのindex.htmlにCDNのリンクを追加し、CDNを使用している場合、...

私が見るよう

が、あなたは、ブートストラップglyphiconを使用してグローバルCSSをロードします。それ以外の場合は、ローカルCSSをロードする場合は、 fontsディレクトリにもアクセスする必要があります。 ところで、

(click)="onClick() 
    " 

変化に：

(click)="onClick()" 

Answer 2

は、あなたの代わりにngClassを使用してみましたか？

私は 例えば、UNIQUEクラスを切り替える必要があるときに結合 [class.CLASSNAME]を使用する傾向がある

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

リンク上のactiveクラス。あなたの場合、は2つのクラスの間で決定する必要があります、ngClassより便利と思われます&コンパクト。

Answer 3

まずあなたが今

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

あなたがコンポーネント内のテンプレートで簡単にブートストラップクラスを追加することができます

npm install bootstrap --save 

は、その後、あなたのstyle.cssファイルにbootstap CSSをインポートするプロジェクトフォルダ内のブートストラップをインストールする必要があります

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

Answer 4

将来の読者のためにb ootstrap 4とglyphiconの問題を有する：

glyphiconは[see】ブートストラップ4で削除されました。したがって、v3にダウングレードするか、独自のアイコンフォントを使用することができます。