如何从抽象类访问html元素

Question

我有一个简单的crud类，它有多种方法：

export abstract class Crud<T extends { id?: number }> {}

在我的许多组件中，我扩展了这个类，例如：

export class CompanyComponent extends Crud<Company> implements OnInit {}

如果我在CompanyComponent中定义了一个ViewChild，我如何从抽象类访问它？我想从抽象类向这个元素添加一些类。

Answer 1

如果我在CompanyComponent中定义了ViewChild，我如何从抽象类访问它？我想从抽象类向这个元素添加一些类。

不确定这是否是你想要的，不如做下面的事情：

• 在抽象类中定义一个抽象字段，并在方法中使用它

// Within abstract class
abstract elementRef: ElementRef;

addClass() {
if (this.elementRef) {
// Do something with elementRef
const htmlElement = this.elementRef.nativeElement as HTMLElement;
htmlElement.className = "some-class";
}
}

• 在扩展抽象类的组件中获取ElementRef

// Within CompanyComponent
@ViewChild('someRef') elementRef!: ElementRef;  // someRef refers to template reference variable in html

另一种方法是，扩展抽象类的组件调用由抽象类实现的方法，并将elementRef作为参数传递给它。