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

尝试：

binding.pry

Answer 2

这发生了因为标签＆＃39; i＆＃39;不包含属性[fa]，如果你的组件有选择器a [fa]你必须把它叫来。在Angular术语组件中，no包含属性[fa]

试试这个，将指令重命名为ifa：selector：＆＃39; [ifa]＆＃39;

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

或

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

或更改为选择器[fa]并输入

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

Answer 3

原来我已将模板移动到另一个模块，并且不了解模块如何协同工作。

此页面详细介绍了NgModule的详细信息：https://angular.io/guide/ngmodule

它的要点是每个模块必须导出其声明，以便其他模块使用它们。建议的方法是创建一个每个模块在其导入数组中导入的CommonModule（包括AppModule，如果需要），并在其中声明并导出所有小指令，组件和管道。

您不想将AppModule导入其他模块，因此需要使用CommonModule。

无法绑定到'fa'，因为它不是'i'的已知属性

3 个答案: