我不明白为什么这些图标不起作用

Question

我想在我的 angular 应用程序中使用 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>")

我做错了什么吗？普通图标的名称是否与 angular 图标的名称相同？

Answer 1

我可以看到您正在将 fontawesome 模块导入图像模块，但您没有将其添加到实际导入列表中...

@NgModule({
  declarations: [ImageComponent, GridComponent],
  imports: [CommonModule, 
    MaterialModule, 
    AngularFontAwesomeModule,
    RouterModule.forChild(appRoutes)]
})
export class ImageModule {}

我不明白为什么这些图标不起作用

I don't understand why these icons won't work

font-awesome

angular