在 Angular 14 中,独立组件必须以类形式定义,并使用 @Component 装饰器进行修饰。然而,如果该组件中使用了特定的 Angular 功能,例如指令或管道等,那么还需要在组件定义前添加 @NgModule 注解。
以下是一个示例独立组件代码,其中使用了一个自定义管道功能:
import { Component, Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'uppercase' })
export class UpperCasePipe implements PipeTransform {
transform(value: string) {
return value.toUpperCase();
}
}
@Component({
selector: 'app-hello-world',
template: '{{ name | uppercase }}
'
})
export class HelloWorldComponent {
name = 'World';
}
在上述示例中,必须为自定义管道 UpperCasePipe 添加 @NgModule 注解,以指示该组件依赖于该管道。
为了修复缺少 @NgModule 注解的错误,只需在组件定义前添加 @NgModule 注解,如下所示:
import { Component, NgModule, Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'uppercase' })
export class UpperCasePipe implements PipeTransform {
transform(value: string) {
return value.toUpperCase();
}
}
@NgModule({
declarations: [HelloWorldComponent, UpperCasePipe]
})
@Component({
selector: 'app-hello-world',
template: '{{ name | uppercase }}
'
})
export class HelloWorldComponent {
name = 'World';
}
如上所示,在 @NgModule 注解中声明 HelloWorldComponent 和 UpperCasePipe,这样 Angular 就会知道它们之间的依赖关系。