如何通过引用传递Angular指令 实现自定义组件模板引用绑定

你提到的#xxx写法是Angular的模板引用变量，这类变量是Angular编译模板阶段静态解析的，不支持运行时通过传入字符串动态生成、挂载引用标识，所以你设想的传targetElement属性动态挂载引用的方案在框架机制层面无法实现。

方案1：暴露内部元素引用（最小改动兼容原有逻辑） #

这个方案不需要修改父组件原有模板的#refreshPrice写法，仅需要在子组件暴露内部button引用，父组件取用时多访问一层属性即可，完全兼容你原来订阅click事件的逻辑。

1. 修改spinner-button子组件模板，给内部原生button添加固定的模板变量标记：

<button #innerButton>
    <mat-spinner></mat-spinner>
</button>

2. 修改spinner-button组件类代码，通过@ViewChild拿到内部button的引用，作为公共属性暴露：

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";

@Component({
  selector: "spinner-button",
  templateUrl: "./spinner-button.component.html",
  styleUrls: ["./spinner-button.component.css"]
})
export class SpinnerButtonComponent implements AfterViewInit {
  @ViewChild('innerButton') innerButton!: ElementRef<HTMLButtonElement>;

  ngAfterViewInit() {
    // 此处已经可以获取到内部button的原生DOM实例
  }
}

3. 父组件获取引用时，从子组件实例上读取暴露的button元素即可，原有事件订阅逻辑不需要改动：

// 父组件类中
import { SpinnerButtonComponent } from './spinner-button/spinner-button.component';

@ViewChild('refreshPrice') spinnerBtnComp!: SpinnerButtonComponent;

ngAfterViewInit() {
  // 拿到内部原生button元素，和原来获取input元素的用法完全一致
  const btnElement = this.spinnerBtnComp.innerButton.nativeElement;
  fromEvent(btnElement, 'click').subscribe(/* 你的点击处理逻辑 */)
}

方案2：通过@Output对外暴露事件（更符合Angular规范） #

如果你拿元素引用的核心需求只是订阅点击事件，完全不需要操作DOM元素引用，直接通过Angular的事件输出机制实现即可，代码更符合框架设计规范，不需要操作原生DOM：

1. 在spinner-button组件类中定义输出事件：

import { Component, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "spinner-button",
  templateUrl: "./spinner-button.component.html",
  styleUrls: ["./spinner-button.component.css"]
})
export class SpinnerButtonComponent {
  @Output() btnClick = new EventEmitter<MouseEvent>();
}

2. 给子组件内部button绑定点击事件，把事件向外发射：

<button (click)="btnClick.emit($event)">
    <mat-spinner></mat-spinner>
</button>

3. 父组件直接绑定事件即可，甚至不需要定义模板引用变量：

<spinner-button (btnClick)="你的点击处理函数($event)"></spinner-button>

注意：如果确实需要父组件直接通过模板引用拿到原生button元素（比如要给元素打第三方非Angular的DOM标记），在方案1的基础上直接读取子组件暴露的innerButton属性即可，不需要额外做多余的引用挂载配置。

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