如何有条件地渲染 Angular 组件

Question

假设我的项目中有以下结构。它为每个客户端提供一个模块，用于声明自定义组件和一个公共模块，如果此客户端没有实现，则声明默认组件。

/company-module-a/register-form-screen

/company-module-a/register-form-screen/part-1-form-component

/company-module-a/register-form-screen/part-2-form-component

/company-module-b/register-form-screen/

/company-module-b/register-form-screen/part-1-form-component

/company-module-b/register-form-screen/part-4-form-component

/common-module/register-form-screen/

/common-module/register-form-screen/part-1-form-component

/common-module/register-form-screen/part-2-form-component

/common-module/register-form-screen/part-3-form-component

/common-module/register-form-screen/part-4-form-component

我希望默认使用通用组件，然后使用公司组件，如果它具有相同名称的组件，则使用公司组件，但在 Angular 中这是不可能的。另一种解决方案是在所有模块中实现所有组件，如果公司模块与普通模块没有区别，只需扩展它，然后通过路由导入模块。是否有其他解决方案可以解决此结构问题，从而提高代码重用性？公司模块由当前认证用户的公司名称定义，保存在浏览器本地存储中。

Answer 1

由于组件选择器在编译时由 angular 编译器解析，因此您需要一个结构指令来将组件解析推迟到运行时。例如，您可以使用*ngIf或*ngSwitch选择要渲染的组件。请注意，此方法要求捆绑所有组件，而不管在运行时实际使用哪些组件。如果您有很多组件，或者关心包的大小，那么为每个公司编译单独的包可能是更好的方法。