typescript 属性指令 - 自定义

Posted 2021-05-21

import { Component } from '@angular/core';
import {MyDirective} from './my-directive.directive'

@Component({
  moduleId: module.id,
  selector: 'test6-app',
  templateUrl: 'test6.component.html',
  styleUrls: ['test6.component.css'],
  directives:[MyDirective]
})
export class Test6AppComponent {
  title = 'test6 works!';
}

<h1 MyDirective>
  {{title}}
</h1>

.is-favorite{
  color:red;
}

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

@Directive({
  selector: '[MyDirective]'
})
export class MyDirective {
  @HostBinding('class.is-favorite') isFavorite = true;
  constructor() {}
}