angular 自定义指令

demo06.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'demo06',
    template: `
        <h1 test>这是自定义指令demo</h1>
    `
})

export class Demo06Component implements OnInit {
    constructor() { }

    ngOnInit() { }
}

test.directive.ts

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

@Directive({ selector: '[test]' })

export class TestDirective implements OnInit {
    constructor(private el:ElementRef) {
        console.log('自定义指令被调用了');
        console.log(el);
    }
    //初始化时 会自动调用的一个方法
    ngOnInit(){
        this.el.nativeElement.style.backgroundColor='#FF0000'
    }
}

app.module.ts

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

import { AppComponent }  from './app.component';
import {Demo01Component} from './demo01/demo01.component';
import {Demo02Component} from './demo02/demo02.component';
import {Demo03Component} from './demo03/demo03.component';
import {Demo04Component} from './demo04/demo04.component';
import {Demo05Component} from './demo05/demo05.component';
import {Demo06Component} from './demo06/demo06.component';
import {TestDirective} from './demo06/test.directive';

@NgModule({
  imports:      [ BrowserModule,FormsModule ],
  declarations: [ 
    AppComponent,
    Demo01Component,
    Demo02Component,
    Demo03Component,
    Demo04Component,
    Demo05Component,
    Demo06Component,
    TestDirective
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
      <h1>Hello {{name}}</h1>
      <demo06></demo06>
  `,
})
export class AppComponent  { name = 'New Year'; }

--------------------------------------------------------------

自定义指令传参

demo06.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'demo06',
    template: `
        <h1 test="#FF0000">这是自定义指令demo</h1>
    `
})

export class Demo06Component implements OnInit {
    constructor() { }

    ngOnInit() { }
}

test.directive.ts

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

@Directive({ selector: '[test]' })

export class TestDirective implements OnInit {
    //@Input() test="";
    @Input('test') myTest="";
    constructor(private el:ElementRef) {
        console.log('自定义指令被调用了');
        console.log(el);
        //console.log(this.test); 这里不会得到this.test的值
    }
    //初始化时 会自动调用的一个方法
    ngOnInit(){
        //console.log(this.test);
        //this.el.nativeElement.style.backgroundColor=this.test;
        this.el.nativeElement.style.backgroundColor=this.myTest;
    }
}