具有新输入/输出的 Angular 18 抽象组件

Question

我想创建一个由某些组件继承的抽象类。我正在使用来自

output()

的 Angular 18

@angular/core

。我无法使用简单的抽象类来做到这一点，因为新的

output()

函数抱怨位于 Angular 组件之外：

import { output } from '@angular/core';

export abstract class AbstractGeneralCardComponent {
  seeMoreClick = output<void>();
  seeLessClick = output<void>();
}

Unsupported call to the output function. This function can only be used as the initializer 
of a property on a @Component or @Directive class.

如何实现这一目标？

Answer 1

出现这个问题是因为

output()

函数只能在用

@Component

或

@Directive

修饰的类中使用。由于您的抽象类没有这些装饰器，因此您会收到错误。

你可以用

@Directive()

来装饰你的抽象类。这告诉 Angular 你的类是一个指令，允许你使用

output()

函数。

具体操作方法如下：

import { Directive, output } from '@angular/core';

@Directive()
export abstract class AbstractGeneralCardComponent {
  seeMoreClick = output<void>();
  seeLessClick = output<void>();
}