自定义属性型指令

了解一些概念

1. 指令宿主元素--宿主元素是指指令被绑定到的元素

   获取指令的宿主元素：

   xxxxxxxxxx
   //在指令的构造函数中接收ElementRef
   constructor(private ele: ElementRef) {
       console.log(this.ele)
     }
   

2. 为宿主元素绑定事件

   xxxxxxxxxx
   //为宿主元素绑定了一个点击事件，当点击宿主元素时，onClick函数会被调用
    @HostListener('click') onClick() {
       
     }
   

自定义一个指令

xxxxxxxxxx
<!-- 我们给<p>这个DOM绑定了一个属性指令“appPopup”,该指令会实现这样的功能。在鼠标移入<p>时，该指令能使这个DOM元素中的字体变为红色，鼠标移出DOM后，字体颜色为黑色，并且点击这个DOM元素的时候，会弹出消息。 -->
<p appPopup="提示信息">点击我会有提示哦！！</p>
<p [appPopup]="message">点击我会有提示哦！！</p>
<p appPopup>点击我会有提示哦！！</p>

1. 使用Angular-Cli创建指令

   执行ng generate directive popup或者ng g d popup。

   最终生成src/app/popup.directive.ts文件。

   并且指令要在模块的declarations中声明。

   xxxxxxxxxx
   //src/app/popup.directive.ts
   import { Directive } from '@angular/core';
   
   //指令类的装饰器
   @Directive({
       //选择器，最终通过`appPopup`这个名称去使用指令，可以自定义名字
     selector: '[appPopup]'
   })
   //指令的类
   export class HighlightDirective {
     constructor() { }
   }
   

   xxxxxxxxxx
   @NgModule({
     declarations: [
       PopupDirective,
     ],
   

2. 获取指令的宿主元素，为指令的宿主元素绑定事件

   xxxxxxxxxx
   import { Directive, ElementRef, HostListener } from '@angular/core';
   
   @Directive({
     selector: '[appPopup]'
   })
   
   export class PopupDirective {
     
     constructor(private ele: ElementRef) {
       //构造函数中引入了ELementRef从而获取宿主元素
     }
     @HostListener('mouseenter') onMouseEnter() {
      //绑定鼠标移入DOM
     }
     @HostListener('mouseout') onMouserOut() {
       //绑定鼠标移出DOM事件
     }
     @HostListener('click') onClick() {
       //绑定点击事件
     }
   

3. 为鼠标移入移出事件添加处理逻辑

   xxxxxxxxxx
   @HostListener('mouseenter') onMouseEnter() {
        //鼠标移入DOM时，宿主元素的字体颜色为红色
       this.ele.nativeElement.style.color = 'red'
     }
     @HostListener('mouseout') onMouserOut() {
         //鼠标移出DOM时，宿主元素的字体颜色为黑色
       this.ele.nativeElement.style.color = '#000'
     }
   

4. 获取输入属性，为点击事件添加处理逻辑

   xxxxxxxxxx
    export class PopupDirective {
     //获取输入属性`appPopup`将得到的值赋值给类的成员变量message
     @Input('appPopup') message = '默认提示信息'
     constructor(private ele: ElementRef) { }
     @HostListener('click') onClick() {
        //点击宿主元素时，弹出提示信息
       alert(this.message)
     }
   
   }
   

5. 应用指令

   xxxxxxxxxx
   <p appPopup="提示信息">点击我会有提示哦！！</p>
   <p [appPopup]="message">点击我会有提示哦！！</p>
   <p appPopup>点我提示默认信息</p>
   

实时效果反馈

1.下列描述错误的是：

A 使用ng g d 指令来创建指令

B constructor(private ele: ElementRef) { }可以获取指令的宿主元素。

C 创建完指令之后，不在模块中声明也可以使用指令

D @HostListener('click')为指令的宿主元素绑定了点击事件

答案

1=>C

<ng-template>与ViewContainerRef

1. <ng-template>

   它定义了一个默认情况下不渲染任何内容的模板。我们可以自己控制如何去渲染它里面的内容。

   xxxxxxxxxx
   <!-- 直接在模板中写<ng-template>标签，它是不会被渲染的 -->
   <ng-template>一些内容</ng-template>
   

   <ng-template>是TemplateRef class的实例，我们可以通过@ViewChild（TemplateRef）查找模板中的<ng-template>或者给<ng-template>添加模板变量。

   xxxxxxxxxx
   @Component({ 
       template: `
         <div></div>
         <ng-template>一些内容</ng-template>
         <!-- 或者 -->
         <!-- <ng-template #tel>一些内容</ng-template> -->
     `,
   })
   
   export class AppComponent{
       //未使用模板变量的获取方式
       @ViewChild(TemplateRef) tl!:TemplateRef<any>;
       //使用模板变量的获取方式
       //@ViewChild('tel') tl!:TemplateRef<any>;
   }
   

   结构指令其实是<ng-template>的语法糖

   例如：

   xxxxxxxxxx
   <div *ngIf="condition" class="name">{{name}}</div>
   

   它会转化成

   xxxxxxxxxx
   <ng-template [ngIf]="condition">
     <div class="name">{{name}}</div>
   </ng-template>
   

   获取指令所在的ng-template

   xxxxxxxxxx
   // 在指令类的构造函数中引入TemplateRef
   constructor(private tl: TemplateRef<any>,) {
       console.log(this.tl)
     }
   

2. ViewContainerRef视图容器

   用来管理容器中的视图。

   访问视图容器：

   xxxxxxxxxx
   //在构造函数中引入 ViewContainerRef
   constructor(private viewContainer: ViewContainerRef) {
       console.log(this.viewContainer )
     }
   

   使用createEmbeddedView()动态操作<ng-template>。

   xxxxxxxxxx
   //参数为TemplateRef实例，这个时候会实例化TemplateRef，并把它插入到该容器中。这个时候<ng-template>中的内容就会被渲染,但是<ng-template>这个标签不会被渲染出来
   this.viewContainer.createEmbeddedView(tl:TemplateRef)
   

   使用clear()清空视图容器中的所有视图。

   xxxxxxxxxx
   this.viewContainer.clear()
   

实时效果反馈

1.下列描述错误的是：

A <ng-template>一些内容</ng-template>，默认情况下，页面上不会显示文本一些内容

B <ng-template>一些内容</ng-template>如果被添加到视图容器，最终的DOM就是<ng-template>一些内容</ng-template>。

C 视图容器动态渲染<ng-template>的内容

D constructor(private viewContainer: ViewContainerRef)可以获得视图容器的访问权

答案

1=>B