FontAwesome не работает с Angular с использованием пролетов - PullRequest
Новая
       67

FontAwesome не работает с Angular с использованием пролетов

0 голосов
/ 23 ноября 2018

Я новичок в Angular, так что терпите меня.Я пытаюсь использовать FontAwesome в моем проекте.Сначала я загрузил его через CDN, но я хочу использовать его правильно.Итак, я импортировал FontAwesomeModule в мой WidgetModule.Это выглядит так: 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { WidgetRoutingModule } from './widget-routing.module';
import { SharedModule } from '@pyb-shared/shared.module';
import { WidgetComponent } from './widget.component';
import { ScenariosComponent } from './scenarios/scenarios.component';
import { QuestionsComponent } from './questions/questions.component';
import { AnswersComponent } from './answers/answers.component';
import { ResultsComponent } from './results/results.component';

import { AnswerButtonComponent } from './shared/answer-button/answer-button.component';
import { HeaderComponent } from './shared/header/header.component';
import { LoadingButtonComponent } from './shared/loading-button/loading-button.component';
import { MainProductComponent } from './shared/main-product/main-product.component';
import { MatchesComponent } from './shared/matches/matches.component';
import { ProductComponent } from './shared/product/product.component';
import { QuestionSplitComponent } from './shared/question-split/question-split.component';

import { AnswersService } from './answers/answers.service';
import { QuestionsService } from './questions/questions.service';
import { ResultsService } from './results/results.service';
import { ScenariosService } from './scenarios/scenarios.service';

import { AnswerMatchService } from './shared/answer-match.service';
import { DuplicateService } from './shared/duplicate.service';
import { FilterService } from './shared/filter.service';
import { FormulaService } from './shared/formula.service';
import { MatchesService } from './shared/matches.service';
import { PickService } from './shared/pick.service';
import { QuestionSplitService } from './shared/question-split/question-split.service';
import { StateService } from './shared/state.service';
import { WidgetService } from './widget.service';

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faSquare, faCheckSquare } from '@fortawesome/pro-solid-svg-icons';

@NgModule({
  imports: [
    CommonModule,
    WidgetRoutingModule,
    SharedModule,
    FontAwesomeModule
  ],
  declarations: [
    WidgetComponent,
    ScenariosComponent,
    QuestionsComponent,
    AnswersComponent,
    ResultsComponent,

    AnswerButtonComponent,
    HeaderComponent,
    LoadingButtonComponent,
    MainProductComponent,
    MatchesComponent,
    ProductComponent,
    QuestionSplitComponent
  ],
  providers: [
    AnswersService,
    QuestionsService,
    ResultsService,
    ScenariosService,

    AnswerMatchService,
    DuplicateService,
    FilterService,
    FormulaService,
    MatchesService,
    PickService,
    QuestionSplitService,
    StateService,
    WidgetService
  ]
})
export class WidgetModule {
  constructor() {
    console.log('WidgetModule loaded.');
    library.add(faSquare, faCheckSquare);
  }
}

Я хочу показать два значка на моем компоненте, чтобы вы могли видеть в модуле выше, я добавил faSquare и faCheckSquare ,В моем компоненте (который называется ScenariosComponent ) у меня просто есть этот диапазон: 

<span class="fas fa-square"></span>

По ссылке, которую я предоставил выше, и глядя на это:

https://github.com/FortAwesome/angular-fontawesome

Похоже, это должно работать.У меня импортирован FontAwesomeModule , ScenariosComponent имеет WidgetModule в качестве родительского модуля, поэтому он должен просто работать.Согласно этой строке:

Значки, добавленные в библиотеку, будут доступны любому другому компоненту, родительский модуль которого также импортирует FontAwesomeModule.

И у меня есть настроенная библиотекав моем модуле.Что должно работать в этом модуле, по крайней мере, в моем понимании.

Я делаю это правильно?

1 Ответ

0 голосов
/ 23 ноября 2018

Если вы хотите использовать angular-fontawesome, вам придется следовать их руководству.Есть несколько проблем с вашей реализацией.

Первая проблема здесь: 

import { faSquare, faCheckSquare } from '@fortawesome/pro-solid-svg-icons';

Вы импортируете из @fortawesome/pro-solid-svg-icons, которая является профессиональной версией FortAwesome.

Вы должны были импортировать из @fortawesome/free-solid-svg-icons вместо: 

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faSquare, faCheckSquare } from '@fortawesome/free-solid-svg-icons';

Тогда в вашем AppModule: 

export class AppModule {
  constructor() {
    library.add(faSquare, faCheckSquare);
  }
}

Второй вопрос, из Руководства для angular-fontawesome, похоже, вам придется использовать его в качестве компонента: fa-icon со свойством @Input [icon] длякоторым вы должны будете указать название класса (классов), который вы хотите применить к ним.

Примерно так: 

<div style="text-align:center">
  <fa-icon [icon]="['fas', 'square']"></fa-icon>
  <br>
  <fa-icon [icon]="['fas', 'check-square']"></fa-icon>
</div>

Вот Образец StackBlitz для вашей ссылки.

...