Angular 2 glyphicon沒有出現

試圖在主頁上呈現星形圖標，但它沒有出現（這是唯一應該在頁面上）。很新，所以我還在學習。請原諒這個問題的絕對愚蠢。Angular 2 glyphicon沒有出現

所以我創建了一個叫做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; 
    } 
}

我在服務器上監聽模式下運行，但它沒有顯示我的web瀏覽器的明星。任何人都可以解釋我做錯了什麼。

這裏是我的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 { }

想法，建議，對我會錯在何處想法？

來源

2017-02-05 Tom L' esperance

'@Input（）'在這裏是不必要的。它用於從父組件傳遞數據。（即，''） – JordanFrankfurt

結帳你的CSS定義：從CDN負載，...

我看到，您使用的引導glyphicon，如果使用CDN，只需添加CDN鏈接的index.html加載全局CSS。否則，如果你加載本地的CSS，你也需要服務fonts目錄。順便說一句，

(click)="onClick() 
    "

變化：

(click)="onClick()"

來源

2017-02-05 04:09:20

謝謝，我不得不對cdn的東西進行一點挖掘，但這些是我的代碼中缺少的行 <鏈路HREF = 「https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css」的rel = 「樣式表」> –

您是否嘗試過使用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; 
    } 
}

我傾向於使用一個[class.CLASSNAME]結合當我需要撥動一類獨特的，例如一個鏈接上的active類。因爲在你的情況下，你需要決定兩個類,ngClass看起來更方便&緊湊。

來源

2017-02-05 09:24:57 AngularChef

首先，你需要安裝引導項目文件夾

npm install bootstrap --save

然後導入bootstap CSS在你的style.css文件

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

現在，你可以在裏面組件添加到模板簡單的自舉類

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

來源

2017-07-20 17:19:18

對於使用b。未來的讀者ootstrap 4以及具有glyphicon問題：

glyphicon已經在引導4被刪除[see]。所以你可能會降級到v3或使用你自己的圖標字體。

來源

2018-01-29 19:18:17 Dexter

Angular 2 glyphicon沒有出現

回答

相關問題