时间戳

首页 > 解决方案 > 如何有条件地渲染 Angular 组件

javascript - 如何有条件地渲染 Angular 组件

问题描述

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

/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 中这是不可能的。另一种解决方案是在所有模块中实现所有组件，如果公司模块与普通模块没有区别，只需扩展它，然后通过路由导入模块。这个结构问题还有其他解决方案，提高代码重用吗？company 模块由当前认证用户的公司名称定义，并存储在浏览器本地存储中。

标签： javascriptangular

解决方案

由于组件选择器在编译时由 Angular 编译器解析，因此您需要一个结构指令来将组件解析推迟到运行时。

例如，您可以使用*ngIf或*ngSwitch选择要渲染的组件。

请注意，这种方法需要捆绑所有组件，而不管在运行时实际使用了哪些组件。如果您有许多组件，或者关心包大小，则为每个公司编译单独的包可能是更好的方法。

推荐阅读