如何在功能模块中使用独立组件、管道或指令

Question

我将我的 Angular 项目更新为 Angular 14。现在我想要一些standalone components，，pipes或者directives。

我有一个名为ProductModule的特色模块，并且希望在此模块中使用名为uppercase的独立管道。

// structure
---Product
          ---product.component
          ---product.service
          ---product.module.ts

---StandabloneFolder
                    ---uppercase.pipe.ts

我的大写管子

@Pipe({
    name: 'uppercase',
    standalone: true,
})
export class UppercasePipe implements PipeTransform {
    transform(value: string): string {
        return "UPPERCASE_INPUT"
    }
}

在product.component.html中

{{'Javascript Addicted' |uppercase}}

出现以下错误：

找不到名称为“大写”的管道product.component.ts(6, 39)：组件 ProductComponent 的模板中发生错误。

笔记：

standalone: true如果我添加到Product.Component并从声明数组中删除ProductComponent，这个问题就会得到解决。

Answer 1

您需要将UppercasePipe 添加到product.module.tsimports中。

产品模块.ts

@NgModule({
  imports: [/*some import*/, UppercasePipe],
  /* other stuff*/
})
export class ProductModule {}