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;
}
}