Угловой 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; 
    } 
} 

У меня есть сервер, работающий на режиме прослушивания, но он не показывает мне звезду на WebBrowser. Может кто-нибудь объяснить, что я делаю неправильно.

Вот мой 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 определить: груз из КДСА, загружать глобальную CSS, ...

, как я вижу, вы используете загрузочный glyphicon, если вы используете CDN, просто добавьте ссылку на КДС index.html. else, если вы загружаете локальный 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; 
    } 
} 

Я предпочитаю использовать [class.CLASSNAME] связывания, когда нужно переключить уникальный класс, например, класс active по ссылке. Так как в вашем случае вам нужно решить между двумя классами, ngClass кажется более удобным & compact.

Answer 3

Прежде всего, необходимо установить загрузчик в вашей папке проекта

npm install bootstrap --save 

Затем импортировать bootstap CSS в файле style.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

Для будущего читателя с использованием b ootstrap 4 и имеющие проблемы с glyphicon:

glyphicon был брошен в загрузчике 4 [see]. Таким образом, вы можете перейти на v3 или использовать свои собственные шрифты значков.