angular 自定义指令

ゝ一世哀愁。 2022-06-01 04:10 272阅读 0赞

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