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没有出现

回答

相关问题