属性指令 angular

Question

我创建了一个属性指令来根据输入的一系列数字显示网络徽标。但是，我无法让 HTML 页面显示任何内容。我的项目可以编译，但 HTML 页面显示为空白。我做错了什么？

下面是我的 app.component.html 代码：

<input type="text"[(ngModel)]="cardNumberInput"/>
<p>{{cardNumberInput}}</p>
<img applogo [cardType]="cardNumberInput" width="30"/>

下面是我的 app.module.ts 代码：

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

import { FormsModule } from '@angular/forms'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LogoDirective } from './logo.directive';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    LogoDirective
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

directive.ts:

import {Directive, Input, OnChanges, HostBinding} from '@angular/core';

enum CardType { VISA = 'visa', MASTERCARD = 'mastercard', AMERICAN_EXPRESS = 'aexpress', DISCOVER = 'discover', DINERS = 'diners', UNKNOWN = 'unknown'}

@Directive({
  selector: '[logo]'
})
export class LogoDirective implements OnChanges {


  @HostBinding('src')
  imageSource;

  @Input()
  cardNumber: string;

  ngOnChanges() {
    this.imageSource = 'assets/cards' + this.getCardTypeFromNumber() + '.png';
  }

  getCardTypeFromNumber(): CardType {
    if (this.cardNumber) {
      if (this.cardNumber.startsWith('34')) {
        return CardType.AMERICAN_EXPRESS;
      } else if (this.cardNumber.startsWith('4')) {
        return CardType.VISA;
      } else if (this.cardNumber.startsWith('5')) {
        return CardType.MASTERCARD;
      } else if (this.cardNumber.startsWith('60')) {
        return CardType.DISCOVER;
      } else if (this.cardNumber.startsWith('30')) {
        return CardType.DINERS;
      }
    }
    return CardType.UNKNOWN;
  }

}

directive.spec.ts:

import { LogoDirective } from './logo.directive';

describe('LogoDirective', () => {
  it('should create an instance', () => {
    const directive = new LogoDirective();
    expect(directive).toBeTruthy();
  });
});

Answer 1

您的属性绑定有几个错误。请更正您的模板如下：

您的属性选择器名称是 logo 而不是 applogo
您输入的属性名称是 cardNumber 而不是 cardType
您没有在图像中指定 src 属性。

需要更改

  constructor(private element: ElementRef){
  }

  ngOnChanges() {
    debugger;
    this.imageSource = 'assets/cards' + this.getCardTypeFromNumber() + '.png';
    this.element.nativeElement.src = this.imageSource;
    this.element.nativeElement.alt = this.imageSource;
  }

<input type="text"[(ngModel)]="cardNumberInput"/>
<p>{{cardNumberInput}}</p>
<img logo [cardNumber]="cardNumberInput" width="30"  />

logo.directive.ts

import {Directive, Input, OnChanges, HostBinding, ElementRef} from '@angular/core';

enum CardType { VISA = 'visa', MASTERCARD = 'mastercard', AMERICAN_EXPRESS = 'aexpress', DISCOVER = 'discover', DINERS = 'diners', UNKNOWN = 'unknown'}

@Directive({
  selector: '[logo]'
})
export class LogoDirective implements OnChanges {
imageSource:string ='';

  @Input()
  cardNumber: string;
  constructor(private element: ElementRef){
  }

  ngOnChanges() {
    debugger;
    this.imageSource = 'assets/cards' + this.getCardTypeFromNumber() + '.png';
    this.element.nativeElement.src = this.imageSource;
    this.element.nativeElement.alt = this.imageSource;
  }

  getCardTypeFromNumber(): CardType {
    if (this.cardNumber) {
      if (this.cardNumber.startsWith('34')) {
        return CardType.AMERICAN_EXPRESS;
      } else if (this.cardNumber.startsWith('4')) {
        return CardType.VISA;
      } else if (this.cardNumber.startsWith('5')) {
        return CardType.MASTERCARD;
      } else if (this.cardNumber.startsWith('60')) {
        return CardType.DISCOVER;
      } else if (this.cardNumber.startsWith('30')) {
        return CardType.DINERS;
      }
    }
    return CardType.UNKNOWN;
  }
}

<input type="text"[(ngModel)]="cardNumberInput"/>
<p>{{cardNumberInput}}</p>
<img logo [cardNumber]="cardNumberInput" width="30"  />

您可以看到这个有效的 stackblitz - https://stackblitz.com/edit/angular-4bd23d 它显示 alt 属性，因为我没有图像。

希望对您有所帮助。

属性指令 angular

Attribute directives angular

javascript

angular-directive

angular