由于它不是“我”的已知属性，因此无法绑定到'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。