从Angular 14开始,任何Angular特性(组件、管道或指令)都可以创建为“独立的本周,我们将深入探讨什么是独立组件,它们带来了什么功能,以及如何使用它们。
在我们开始之前,有一个简短的说明:当你看到这些单词时“独立的组件,它实际上意味着“独立的组件/管道/指令”。也许我们应该称这些为“独立特性”,但我还是坚持使用Angular团队迄今为止使用的命名惯例,所以我不是……孤立的。
什么是独立组件?
独立组件是不属于任何组件的组件NgModule
.它可以单独导入并按原样使用。
例如,在过去,我们可能有一个ButtonComponent
和一个ButtonDirective
在一个ButtonModule
(就像角材料做)。这意味着如果我们想用ButtonComponent
,我们必须导入ButtonModule
在我们的AppModule
或者特性模块。这将使两者ButtonComponent
而且ButtonDirective
可以在我们的应用程序中使用,即使你只使用其中一个功能而不需要另一个。
独立组件是不同的。可以在模块中导入它们,就像在数组中导入其他模块一样进口
:

只导入我们需要的特性对于性能来说总是更好的,因为构建输出会比导入整个依赖模块的输出要小。这就是独立组件的第一个好处。
如何创建独立组件?
使用Angular CLI:ng generate component按钮——独立的
控件,也可以使现有组件独立独立:真
的财产@ component
装修师是这样的:

你们可以看到斯塔克布利茨的例子.