J'utilise la directive du bouton de partage ngx-share
dans mon projet. Cependant, je n'arrive pas à utiliser les icônes. Si j'essaie d'utiliser des icônes comme celle-ci:
<button mat-fab shareButton="telegram" [style.backgroundColor]="share.prop.telegram.color">
<fa-icon [icon]="share.prop.telegram.icon" size="lg"></fa-icon>
</button>
Ce que je reçois est l'erreur suivante:
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)
Comment puis-je résoudre ce problème?
J'ai ajouté ShareModule
à la liste des importations:
@NgModule({
imports: [
//..
ShareModule.forRoot()
]
})
Mon composant injecte également l'objet ShareButtons
selon les besoins:
export class GroupComponent {
constructor(public share: ShareButtons) {
}
}
Edit Vous pouvez également importer le
ShareButtonModule
qui exporte déjà la FontAwesomeModule
.
Réponse originale
En supposant que vous ayez déjà installé le paquet font awesome npm, vous devez ajouter FontAwesomeModule
aux importations de votre module.
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
//...
imports: [
//...
FontAwesomeModule
],
})
export class AppModule { }
Voir exemple ici
https://www.npmjs.com/package/@fortawesome/angular-fontawesome
Vous devez importer ShareButtonsModule
dans le module où vous utilisez ces boutons de partage.
import { ShareButtonsModule } from '@ngx-share/buttons';
@NgModule({
imports: [
ShareButtonsModule.forRoot()
]
})