web-dev-qa-db-ja.com

「fa-icon」の既知のプロパティではないため、「icon」にバインドできません

使っています - ngx-share 's Share Button Directive 私のプロジェクトでは。ただし、アイコンを使用することができないようです。このようなアイコンを使用しようとすると：

<button mat-fab shareButton="telegram" [style.backgroundColor]="share.prop.telegram.color">
  <fa-icon [icon]="share.prop.telegram.icon" size="lg"></fa-icon>
</button>

私が得るのは次のエラーです：

Uncaught Error: 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. ("on mat-fab shareButton="telegram" [style.backgroundColor]="share.prop.telegram.color">
    <fa-icon [ERROR ->][icon]="share.prop.telegram.icon" size="lg"></fa-icon>
  </button>

"): ng:///AppModule/GroupComponent.html@49:13
'fa-icon' is not a known element:
1. If 'fa-icon' is an Angular component, 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. ("

  <button mat-fab shareButton="telegram" [style.backgroundColor]="share.prop.telegram.color">
    [ERROR ->]<fa-icon [icon]="share.prop.telegram.icon" size="lg"></fa-icon>
  </button>

"): ng:///AppModule/GroupComponent.html@49:4
    at syntaxError (compiler.js:486)
    at TemplateParser.parse (compiler.js:24674)
    at JitCompiler._parseTemplate (compiler.js:34629)
    at JitCompiler._compileTemplate (compiler.js:34604)
    at eval (compiler.js:34505)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34505)
    at eval (compiler.js:34375)
    at Object.then (compiler.js:475)
    at JitCompiler._compileModuleAndComponents (compiler.js:34374)

この問題を修正するにはどうすればよいですか？

ShareModuleをインポートのリストに追加しました：

@NgModule({
  imports: [
    //..
    ShareModule.forRoot()
  ]
})

私のコンポーネントは、必要に応じてShareButtonsオブジェクトも注入します。

export class GroupComponent {    
  constructor(public share: ShareButtons) {
  }
}
angularngx-share
8
displayname

EditShareButtonModuleを既にエクスポートしているFontAwesomeModuleをインポートすることもできます。

元の答え

フォントの素晴らしいnpmパッケージを既にインストールしていると仮定すると、モジュールのインポートにFontAwesomeModuleを追加する必要があります

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
 //...
imports: [
     //...
   FontAwesomeModule
  ],
})
export class AppModule { }

こちらの例をご覧ください

https://www.npmjs.com/package/@fortawesome/angular-fontawesome

10
David

これらの共有ボタンを使用しているモジュールにShareButtonsModuleをインポートする必要があります。

import { ShareButtonsModule } from '@ngx-share/buttons';

@NgModule({
  imports: [
    ShareButtonsModule.forRoot()
  ]
})
0
Faisal