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








  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值