如何将Angular组件类内代码导入至其他TS文件？

你需要复用的是组件类里的ViewChild声明、全局点击监听和点击拦截方法，又不想封装成独立组件，下面是两种直接可行的实现方式：

方案一：使用混入（Mixins） #

这是Angular里复用组件逻辑的常用方式，完美适配带装饰器（@ViewChild、@HostListener）和类方法的场景：

步骤1：抽离复用逻辑为混入函数 #

新建一个click-handler.mixin.ts文件，把复用的代码封装进去：

import { ElementRef, HostListener, ViewChild } from '@angular/core';

// 定义构造函数类型，用于混入
export type Constructor<T = {}> = new (...args: any[]) => T;

export function ClickHandlerMixin<TBase extends Constructor>(Base: TBase) {
  class ClickHandlerClass extends Base {
    @ViewChild('Button') Button!: ElementRef<HTMLButtonElement>;
    @ViewChild('level2') level2!: ElementRef<HTMLButtonElement>;
    @ViewChild('IconButton') IconButton!: ElementRef<HTMLButtonElement>;

    @HostListener('document:click', ['$event'])
    onClick(event: MouseEvent) {
      const targetElement = event.target as HTMLElement;
      const ButtonTest = this.Button.nativeElement;
      const level2Element = this.level2.nativeElement;
      const IconButton = this.IconButton.nativeElement;

      if (targetElement === IconButton) {
        level2Element.classList.toggle('show-list');
        console.log('CLICK');
      } else {
        level2Element.classList.remove('show-list');
      }
    }

    ClickHandler(event: Event) {
      event.preventDefault();
    }
  }
  return ClickHandlerClass;
}

步骤2：在目标组件中引入混入 #

在需要复用逻辑的组件TS文件里，通过继承混入后的类来获得这些功能：

import { Component } from '@angular/core';
import { ClickHandlerMixin } from './click-handler.mixin';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html' // 把你要复用的HTML结构放在这个模板里
})
export class YourComponent extends ClickHandlerMixin(class {}) {
  constructor() {
    super();
  }
}

方案二：使用基类继承 #

如果你的复用逻辑比较固定，也可以用抽象基类的方式实现：

步骤1：创建抽象基类 #

新建base-click-handler.component.ts，把复用代码放到基类中：

import { ElementRef, HostListener, ViewChild, Component } from '@angular/core';

@Component({
  template: '' // 基类不需要自己的模板，复用的HTML放在子类模板里
})
export abstract class BaseClickHandlerComponent {
  @ViewChild('Button') Button!: ElementRef<HTMLButtonElement>;
  @ViewChild('level2') level2!: ElementRef<HTMLButtonElement>;
  @ViewChild('IconButton') IconButton!: ElementRef<HTMLButtonElement>;

  @HostListener('document:click', ['$event'])
  onClick(event: MouseEvent) {
    const targetElement = event.target as HTMLElement;
    const ButtonTest = this.Button.nativeElement;
    const level2Element = this.level2.nativeElement;
    const IconButton = this.IconButton.nativeElement;

    if (targetElement === IconButton) {
      level2Element.classList.toggle('show-list');
      console.log('CLICK');
    } else {
      level2Element.classList.remove('show-list');
    }
  }

  ClickHandler(event: Event) {
    event.preventDefault();
  }
}

步骤2：子类继承基类 #

在目标组件中直接继承这个基类，就能拥有所有复用的逻辑：

import { Component } from '@angular/core';
import { BaseClickHandlerComponent } from './base-click-handler.component';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html' // 复用的HTML结构放在这里
})
export class YourComponent extends BaseClickHandlerComponent {
  constructor() {
    super();
  }
}

注意事项 #

• 不管用哪种方式，目标组件的模板里必须包含对应的模板引用变量（#Button、#level2、#IconButton），否则@ViewChild会找不到元素，逻辑无法正常运行。
• 如果不同组件里的模板引用变量名称不一样，可以把变量名改成通用命名，或者在混入/基类里做参数化处理。

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