在角度中，如何在不使用导入的情况下在角度模板中使用管道？答案

【问题标题】：In angular, how can I use pipe in angular template without using import?在角度中，如何在不使用导入的情况下在角度模板中使用管道？
【发布时间】：2019-07-19 11:43:03
【问题描述】：

当使用 Angular 内置管道（例如 Date）或使用 custom 管道时，我们需要在组件中使用 import 语句。例如。

import { DatePipe } from '@angular/common';

但是在模板中，我们可以直接使用它，而不必在“组件”中“导入”任何东西。为什么？

我猜角度编译器最终会在将模板转换为“javascript”时添加导入语句，是这样吗？为什么我们不能对组件做同样的事情？

纯粹出于好奇

【问题讨论】：

我认为只是Typecript如果不知道那个类就无法编译。
你还是要通过 CommonModule 来导入，并添加到模块的 imports 数组中。这就是 Angular 了解管道的方式
看angular.io/api/common
另外，请查看github.com/angular/angular/blob/7.2.6/packages/common/…，其中显示“CommonModule 导出由 BrowserModule 重新导出，当您使用 CLI new 命令创建新应用程序时，它会自动包含在根 AppModule 中。”

标签： angular typescript

【解决方案1】：

管道和组件一样是 Angular 的声明性功能。

当您声明管道时，它会作为声明添加到模块中。

@Pipe({name:'myPipe'})
export class MyPipe implements PipeTransform {
   ...
}

@NgModule({
   declarations: [MyPipe]
})
export class PipesModule {}

字符串值“myPipe”的作用很像组件的选择器。

Angular 提前编译器将解析所有模块并读取所有声明。它将选择器和管道名称收集在一起。

声明提供了创建组件和管道实例所需的工厂函数。

当 Angular 编译找到表达式 attribute="num | number" 时，它知道“数字”指的是管道，因为 | 字符。它将搜索已知的工厂函数声明列表。

Angular 从不使用 import 语句来访问管道或组件。编译器解析模块的时候就已经找到了。

【讨论】：

那么为什么组件不会发生类似的事情呢？我们可以在没有“导入”的组件中使用它吗？
@ZammyPage 管道只能通过依赖注入器使用。您不能导入管道并使用 new 运算符创建实例，因为您不知道它需要什么依赖项。不需要将管道添加到模块的 providers 数组中。因此，在组件中使用它们甚至不是标准做法。
不确定您说的是否正确。管道可以在组件中使用，您可以在组件中导入管道。例如。 import { DatePipe } from '@angular/common'; 并将其用作new DatePipe().transform(SomeValue,'yyyy-MM-dd')
@ZammyPage 因为您不应该知道依赖项是什么。如果他们在 Angular 的下一个版本中添加新的依赖项，那么您的应用程序将会崩溃。
@ZammyPage 这是我的理解（也许事情已经改变了），但 Angular 不能在摇树期间删除提供程序，因为提供程序是在模块之外使用的。 Angular 不知道它们是否被使用。这就是他们为@Injectable() 添加“provideIn”标志的原因。当您在“root”中提供时，如果没有代码通过构造函数注入，Angular 可以对可注入对象进行树摇晃。