我想在我的有角度的应用程序中使用fontawesome图标,但是由于某些原因它们似乎不起作用。我遵循了文档,但是它一直崩溃。
应用模块...
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
declarations: [...],
imports: [...,AngularFontAwesomeModule,...]
我的应用分为以下几个模块:
影像模组import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ImageComponent } from './image/image.component';
import { GridComponent } from './grid/grid.component';
import { MaterialModule } from '../material/material.module';
import { Routes, RouterModule } from '@angular/router';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
const appRoutes: Routes = [{ path: '', component: GridComponent }];
@NgModule({
declarations: [ImageComponent, GridComponent],
imports: [CommonModule, MaterialModule, RouterModule.forChild(appRoutes)]
})
export class ImageModule {}
image.component.html
<div class="container">
<div class="card">
<div class="card-image">
<img class="activator" [src]="image.path" />
<a
class="btn-floating halfway-fab waves-effect waves-light"
(click)="like()"
><i class="material-icons red-text">{{ icon }}</i></a
>
</div>
<div class="card-content">
<span class="card-title">{{ image.country }}</span
><span class="right">{{ image.likes }}</span>
<span class="content">
<div>
<fa-icon (click)="Switch()" [icon]="clipboard-list"></fa-icon
><fa-icon (click)="Switch()" [icon]="comments"></fa-icon>
</div>
<h5>Specifications</h5>
<p>ISO: {{ image.iso }}</p>
<p>Shutter Speed: {{ image.shutterSpeed }}</p>
<p>Aperture: {{ image.aperture }}</p>
</span>
</div>
</div>
</div>
image.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { Image } from '../image.model';
import { comments } from '@fontawesome/free-solid-svg-icons';
@Component({
selector: 'app-image',
templateUrl: './image.component.html',
styleUrls: ['./image.component.css']
})
export class ImageComponent implements OnInit {
private _icon: string;
@Input('image') public image: Image;
private _spec: boolean = true;
private _comments: boolean = false;
constructor() {
this._icon = 'favorite_border';
}
ngOnInit() {}
like() {
if (this._icon === 'favorite_border') {
this._icon = 'favorite';
this.image.likes++;
} else {
this._icon = 'favorite_border';
this.image.likes--;
}
console.log(this._icon);
}
get icon(): string {
return this._icon;
}
set icon(value: string) {
this._icon = value;
}
Switch() {
if (this._spec) {
this._spec = false;
this._comments = true;
}
if (this._comments) {
this._spec = true;
this._comments = false;
}
}
}
错误:
Template parse errors:
Can't bind to 'icon' since it isn't a known property of 'fa-icon'.
1. If 'fa-icon' is an Angular component and it has 'icon' input, then verify that it is part of this module.
2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<span class="content">
<div>
<fa-icon (click)="Switch()" [ERROR ->][icon]="clipboard-list"></fa-icon
><fa-icon (click)="Switch()" [icon]="comments"></fa-icon>")
我在做错什么吗,普通图标的名称与角度图标的名称相同吗?
答案 0 :(得分:0)
我可以看到您正在将fontawesome模块导入到图像模块中,但是您没有将其添加到实际的导入列表中...
@NgModule({
declarations: [ImageComponent, GridComponent],
imports: [CommonModule,
MaterialModule,
AngularFontAwesomeModule,
RouterModule.forChild(appRoutes)]
})
export class ImageModule {}