由於它不是「我」的已知屬性，因此無法綁定到'fa'

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

這種情況becouse標籤「我」不包含屬性[足總杯]，如果組件有選擇一個[足總杯]你必須把用於打電話給她。在角術語組分沒有包含屬性[FA]

嘗試此，該指令重命名爲IFA：選擇器： '[IFA]'

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

或

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

或變化選擇器[fa]並把

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

Answer 2

原來我有mo將模板傳遞給不同的模塊，並不理解模塊如何協同工作。

本頁面進入有關NgModule的來龍去脈詳細：https://angular.io/guide/ngmodule

它的要點是，每個模塊都有出口的報關單，以便其他模塊來使用它們。推薦的方法是做一個CommonModule每個模塊進口其進口陣列（包括上文AppModule，如果需要的話），並宣佈和導出所有你的小指令，組件和管道在那裏。

您不想將AppModule導入其他模塊，因此需要使用CommonModule。