Angular笔记_7

指令

组件：带模板的指令

结构型指令：改变宿主文档结构，例如 ngIf、ngFor、ngSwitch

属性型指令：改变宿主行为，例如 ngClass、ngStyle、ngModel

// 创建一个属性指令
import { Directive, ElementRef, Renderer2, OnInit, Input } from '@angular/core';@Directive({selector: 'div[appTest]', // div 宿主类型，需要添加 [] 定义为宿主的属性
})
export class AppTestDirective implements OnInit {@Input() appTest = '0';@Input() height = '0';constructor(private elr: ElementRef, private rd2: Renderer2) {}ngOnInit(): void { // 应该在初始化方法内传值，否则可能哪不到 @Input() 的值this.rd2.setStyle(this.elr.nativeElement, 'backgroundColor', '#000');this.rd2.setStyle(this.elr.nativeElement, 'width', this.appTest);this.rd2.setStyle(this.elr.nativeElement, 'height', this.height);}
}
// 导入属性指令
@NgModule({declarations: [...AppTestDirective,],...

<!-- 使用属性指令 -->
<!-- div 为 appTest 的宿主 -->
<div appTest="80px" [height]="'80px'"></div>
<!-- 黑色正方体 -->
<span appTest>aaa</span>
<!-- 指令不生效 -->

指令的样式和事件绑定

指令没有模板，指令要寄宿在一个元素上-宿主（Host）

@HostBinding 绑定宿主的属性或者样式

@HostListener 绑定宿主的事件

组件的样式中也可以使用 :host 伪类选择器

import {Directive,OnInit,Input,HostBinding,HostListener,
} from '@angular/core';@Directive({selector: 'div[appTest]',
})
export class AppTestDirective implements OnInit {// @Input() appTest = '0';// @Input() height = '0';@HostBinding('style.backgroundColor') backgroundColor = '#000';// 可给属性增加多个注解，先后顺序无关@Input() @HostBinding('style.width') appTest = '0';@HostBinding('style.height') @Input() height = '0';// constructor(private elr: ElementRef, private rd2: Renderer2) {}ngOnInit(): void {// this.rd2.setStyle(this.elr.nativeElement, 'backgroundColor', '#000');// this.rd2.setStyle(this.elr.nativeElement, 'width', this.appTest);// this.rd2.setStyle(this.elr.nativeElement, 'height', this.height);}// click 事件名称，['$event.target']传入参数@HostListener('click', ['$event.target'])handleClick(ev: Event): void {console.log(ev);}
}

<div appTest="80px" [height]="'80px'"></div>
<!-- 无需再次绑定click事件-->
<span appTest>aaa</span>
<!-- 不生效 -->

组件中的 host 主要作用于 css 中

:host {display: flex;justify-content: center;
}

不应用于组件内元素，而作用于组件的组件本身

组件嵌套

本身不可避免，过度的组件嵌套会过于复杂不好维护

组件间通过 @input、@Output 进行交互

@Input() value = '';
@Output() valueChange = new EventEmitter();
handleValueChange(): void {this.valueChange.emit(this.value);
}

避免组件嵌套导致的数据冗余和事件的传递，可以使用内容投影、路由、指令、服务等方式

投影组件

ng-content 动态内容，使用场景，容器组件

<ng-content select="样式类/html标签/指令"></ng-content>

<!-- test.component.html -->
<ng-content select="div"></ng-content>
<ng-content select=".test"></ng-content>
<ng-content select="[appTest]"></ng-content>
<!-- 
aaa
111
ccc
-->

<!-- app.component.html -->
<app-test><p appTest>ccc</p><span class="test">111</span><div>aaa</div>
</app-test>

投影组件，定制性较强，约束性较差