'fa'にはバインドできません。 'i'のプロパティが既知ではありません。

Question

これは素晴らしいフォントプラグインではありません。これは私が書いたものです。 AppModuleに追加すると、動作しません。

AppModule

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { HttpModule } from "@angular/http"; 

import { AppComponent } from './app.component'; 
import { AppRoutingModule } from './app.routing.module'; 
import { HomeComponent } from './home/home.component'; 
import { DataModule } from './data/data.module'; 
import { NavtreeComponent } from './sidebar/navtree.component'; 
import { JsonifyPipe } from './jsonify.pipe'; 
import { DebugPipe } from './debug.pipe'; 
import { PagesModule } from './pages/pages.module'; 
import { PanelsComponent } from './panels/panels.component'; 
import { IsolateScrollDirective } from './controls/isolate-scroll.directive'; 
import { FontAwesomeDirective, FontAwesomeLinkComponent } from './controls/font-awesome.component'; 


@NgModule({ 
    declarations: [ 
    AppComponent, 
    HomeComponent, 
    NavtreeComponent, 
    JsonifyPipe, 
    DebugPipe, 
    PanelsComponent, 
    IsolateScrollDirective, 
    FontAwesomeDirective, 
    FontAwesomeLinkComponent 
    ], 
    imports: [ 
    BrowserModule, 
    AppRoutingModule, 
    HttpModule, 
    DataModule.forRoot(), 
    PagesModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

フォントawesome.component.tsそれが使用さ

import { Component, Directive, ElementRef, Input, HostListener, OnInit, HostBinding } from '@angular/core'; 

import { trigger, state, style, transition, animate } from '@angular/core'; 

@Component({ 
    selector: 'a[fa]', 
    template: 
`<i [fa]="fa" 
    [@spinonce]="fa === 'refresh' ? clicked : 0" 
    (@spinonce.done)="clicked=0"></i> 
`, 

    animations: [ 
     trigger('spinonce', [ 
      //state("void", style({ 
      // transform: 'rotate(0deg)' 
      //})), 
      transition('0 => 1', [ 
       animate('1000ms ease-in-out', style({ 
        transform: 'rotate(360deg)' 
       })) 
      ]), 
     ]) 
    ] 
}) 
export class FontAwesomeLinkComponent { 
    @Input() fa: string; 
    @Input() class: string; 

    @HostBinding('class') 
    get getClass(){ 
     return (this.class || '') + ' fa'; 
    } 
    @HostBinding('attr.aria-hidden') 
    get ariaHidden() { 
     return true 
    } 

    @HostListener('click') 
    onLinkClicked() { 
     this.clicked++; 
    } 

    clicked = 0; 
} 


@Directive({ 
    selector: 'i[fa]' 
}) 
export class FontAwesomeDirective { 
    @Input() public fa: string; 
    @Input() public class: string; 
    @HostBinding('class') 
    public get classStr() { 
     return 'fa fa-' + this.fa + ' ' + (this.class || ''); 
    } 

    @HostBinding('attr.aria-hidden') 
    public get ariaHidden() { return true } 

    constructor() { 

    } 
} 

<button class="ui-button" (click)="importOrders()">Import Orders</button> 
<div class="status-bar"></div> 
<div class="order-list"> 
    <div *ngFor="let item of orders" class="success-{{item.success}}"> 
     <div class="icon-block"><i [fa]="item.icon"></i></div> 
     <span>{{item.order.email}}</span> 
    </div> 
</div> 

エラー

Can't bind to 'fa' since it isn't a known property of 'i'. (""> 
    <div *ngFor="let item of orders" class="success-{{item.success}}"> 
     <div class="icon-block"><i [ERROR ->][fa]="item.icon"></i></div> 
     <span>{{item.order.email}}</span> 
    </div> 
"): ng:///PagesModule/OrdersComponent.html@4:29 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors: 
Can't bind to 'fa' since it isn't a known property of 'i'. (""> 
    <div *ngFor="let item of orders" class="success-{{item.success}}"> 
     <div class="icon-block"><i [ERROR ->][fa]="item.icon"></i></div> 
     <span>{{item.order.email}}</span> 
    </div> 
"): ng:///PagesModule/OrdersComponent.html@4:29 

Answer 1

これはコンポーネントは、あなたが彼女を呼び出すために置かなければなりませんセレクタ[FA]を持っている場合は、「i」は一切、[FA]プロパティが含まれているタグbecouse起こりません。セレクタ： '[IFA]'

<i ifa fa="item.icon"></i> 

又は

<i ifa [fa]="item.icon"></i> 

又は変更角度用語成分にないプロパティ[FA]

IFAにディレクティブの名前を変更し、これを試してくださいが含まセレクター[fa]に入力して入力する

<i [fa]="item.icon"></i> 

Answer 2

テンプレートを別のモジュールに渡し、モジュールがどのように連動するかを理解していませんでした。

このページではNgModuleのインとアウトについて詳しく説明します：https://angular.io/guide/ngmodule

その要旨は、各モジュールは、それらを使用する他のモジュールのためのために、その宣言をエクスポートすることがあるということです。お勧めの方法は、すべてのモジュールがインポート配列（必要に応じてAppModuleを含む）でインポートし、そこに小さなディレクティブ、コンポーネント、およびパイプをすべて宣言して書き出すCommonModuleを作成することです。

AppModuleを他のモジュールにインポートしたくないため、CommonModuleが必要です。