angular4.x学习笔记--指令

- 日理万妓 2022-05-28 01:13 228阅读 0赞

## 指令 ##

Angular的指令概念跟AngularJS的指令差不多，最重要的区别在于Angular中的组件继承指令，算是特殊的指令。我们看下用指令的方式去写组件的简单例子：

import { Directive,Input,ElementRef } from '@angular/core';
    
    @Directive({
        selector: 'hello'
    })
    export class HelloDirective { 
        @Input() name: string;
    
        constructor(private el: ElementRef) {}
    
        public ngOnInit(): void {
    
            this.el.nativeElement.innerText = `hello ${this.name}!`;
        }
    }
    
    // 使用组件指令
    <hello name="Yecao"></hello>
    
    // 渲染结果
    <hello> hello, Yecao! </hello>

不要忘记在使用前先在模块中声明哦，我觉得这是Angular最烦人的一点。

除此之外，还有属性指令和结构指令，属性指令只改变元素的样式或者行为。要写成属性指令，需要在`selector`属性中用`[]`包裹起来。来看简单地例子：

import { Directive, ElementRef, Renderer2 } from '@angular/core';  
    
    @Directive({   
      selector: '[highLight]'  
    })  
    
    export class HighLightDirective {    
      constructor(private el: ElementRef, private renderer2: Renderer2) { }    
    
      ngAfterViewInit() {   
        this.renderer2.addClass(this.el.nativeElement, 'highlight');   
      }  
    }
    
    // 使用属性指令
    <p highLight> 这一段会高亮显示 </p>

结构指令就是模板中提到的\*ngIf，\*ngFor等指令，它修改了DOM结构。举个例子，重写\*ngIf：

import { Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core';   
    
    @Directive({   
      selector: '[myIf]'  
    })  
    
    export class MyIfDirective {    
    
      constructor(private templateRef: TemplateRef<any>,   
          private viewContainer: ViewContainerRef) { }   
    
      @Input() set appMyIf(condition: boolean) {   
        if (condition) {   
          this.viewContainer.createEmbeddedView(this.templateRef);   
        } else {   
          this.viewContainer.clear();   
        }   
      }  
    }  
    
    // 使用结构指令
    <p *myIf="false"> 这一段不会显示 </p>

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

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220528/227ec88985104259950f06b6e6542fe0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220528/b49e39fb638f4813bfef7e8e9a310fd9.png