Ionic自定义指令

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {
  @Input('appHighlight') highlightColor: string;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.el.nativeElement.style.backgroundColor = this.highlightColor || 'yellow';
  }
}

<div [appHighlight]="'lightblue'">This div will have a light blue background.</div>

import { NgModule } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  declarations: [
    HighlightDirective
  ],
  exports: [
    HighlightDirective
  ]
})
export class SharedModule { }

<!-- 正确 -->
<div [appHighlight]="'lightblue'"></div>

<!-- 错误 -->
<div [appHighlight]="lightblue"></div> <!-- 应该是字符串 -->