Angular 4：如何从宿主组件访问属性指令

嘿，要在宿主组件里访问这个cdtSaving属性指令，有几种实用的方法，我给你一步步讲清楚：

方法一：使用@ViewChild直接获取指令实例 #

这是最常用的方式，通过指令类来获取它的实例：

步骤1：完善指令的公共成员（可选但推荐） #

首先确保指令里你想让宿主访问的属性或方法是**公共（public）**的，比如给指令加一个公共方法供宿主调用：

@Directive({ selector: '[cdtSaving]' }) 
export class SavingDirective implements OnInit, OnDestroy { 
  private subscription: Subscription; 
  // 可以添加公共属性供宿主访问
  public isLoading = false;

  constructor(
    private _loaderService: LoaderService, 
    private _elRef: ElementRef, 
    private _renderer: Renderer2
  ) { } 

  ngOnInit() { 
    // 订阅服务状态以显示/隐藏加载器 
    this.subscription = this._loaderService.loading$.subscribe(isLoading => {
      this.isLoading = isLoading;
      this._renderer.setProperty(this._elRef.nativeElement, 'disabled', isLoading);
    });
  }

  ngOnDestroy() {
    this.subscription?.unsubscribe();
  }

  // 公共方法，允许宿主直接控制加载状态
  public toggleLoading(isLoading: boolean) {
    this.isLoading = isLoading;
    this._renderer.setProperty(this._elRef.nativeElement, 'disabled', isLoading);
  }
}

步骤2：在宿主组件中获取指令实例 #

在宿主组件里导入ViewChild和指令类，用@ViewChild装饰器获取实例，注意要在ngAfterViewInit生命周期钩子中访问（此时视图已初始化，指令实例才存在）：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { SavingDirective } from './saving.directive';

@Component({
  selector: 'app-host',
  template: `<button cdtSaving type="submit" class="btn btn-default" [disabled]="!canSave()">Save</button>`
})
export class HostComponent implements AfterViewInit {
  // 通过指令类获取实例
  @ViewChild(SavingDirective) savingDirective!: SavingDirective;

  ngAfterViewInit() {
    // 现在可以访问指令的公共属性和方法了
    console.log("当前加载状态:", this.savingDirective.isLoading);
    // 调用指令的公共方法修改状态
    this.savingDirective.toggleLoading(true);
  }

  canSave(): boolean {
    return true; // 根据你的业务逻辑修改
  }
}

方法二：通过模板变量+exportAs访问指令 #

如果需要在模板中也能直接引用指令，或者想通过模板变量定位指令，可以用这种方式：

步骤1：给指令添加exportAs元数据 #

修改指令的装饰器，添加exportAs属性，允许模板将指令实例导出为变量：

@Directive({ 
  selector: '[cdtSaving]',
  exportAs: 'cdtSaving' // 关键：指定导出的变量名
}) 
export class SavingDirective implements OnInit, OnDestroy { 
  // 原指令代码不变...
}

步骤2：在模板中定义模板变量 #

在宿主组件的模板里，给添加了指令的按钮加上模板变量，并关联到指令的导出名：

<button #saveBtn="cdtSaving" cdtSaving type="submit" class="btn btn-default" [disabled]="!canSave()">Save</button>
<!-- 甚至可以直接在模板中访问指令的公共属性 -->
<p>当前按钮加载状态：{{ saveBtn.isLoading }}</p>

步骤3：在组件类中通过模板变量获取指令 #

同样用@ViewChild，但这次指定模板变量名来获取：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { SavingDirective } from './saving.directive';

@Component({
  selector: 'app-host',
  template: `<button #saveBtn="cdtSaving" cdtSaving type="submit" class="btn btn-default" [disabled]="!canSave()">Save</button>`
})
export class HostComponent implements AfterViewInit {
  // 通过模板变量名获取指令实例
  @ViewChild('saveBtn') savingDirective!: SavingDirective;

  ngAfterViewInit() {
    this.savingDirective.toggleLoading(false);
  }

  canSave(): boolean {
    return true;
  }
}

注意事项 #

• 只有指令的**公共成员（public）**才能被宿主组件访问，私有成员（private）是无法直接获取的
• 一定要在ngAfterViewInit或之后的生命周期钩子中访问指令实例，否则会拿到undefined
• 如果页面中有多个带cdtSaving指令的元素，可以用@ViewChildren来获取所有指令实例的列表

内容的提问来源于stack exchange，提问作者Sam