如何有条件地渲染 Angular 组件

用户5020

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

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

应得

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何有条件地渲染原因反应组件?

来自分类Dev

如何在Angular中有条件地渲染?

来自分类Dev

有条件地反应测试库渲染组件

来自分类Dev

使用hidden属性与有条件地渲染组件

来自分类Dev

使用高阶组件有条件地渲染列表

来自分类Dev

在 React 组件中有条件地渲染 <td>

来自分类Dev

有条件地渲染 aframe 中的组件

来自分类Dev

如何在useEffect中更新状态的条件组件中有条件地渲染?

来自分类Dev

有条件地将CSS类应用于Angular组件宿主

来自分类Dev

Angular 有条件地更改组件的包装器

来自分类Dev

如何有条件地渲染使用钩子的React组件

来自分类Dev

有条件地渲染JSX的React组件的更新周期如何表现?

来自分类Dev

如何在redux-form的<Field>中有条件地渲染组件

来自分类Dev

如何有条件地渲染两个组件?

来自分类Dev

如何在有条件的组件上有条件地添加道具?

来自分类常见问题

如何有条件地包装React组件?

来自分类Dev

如何有条件地向组件添加文本?

来自分类Dev

仅当验证通过时,才有条件地使用ajax渲染组件

来自分类Dev

更改单选按钮时有条件地渲染其他组件

来自分类Dev

在React JSX中有条件地渲染组件部分

来自分类Dev

React JS在上传时有条件地渲染动画乐透组件

来自分类Dev

根据功能组件中的数据有条件地渲染元素

来自分类Dev

有条件地渲染组件而不会丢失“空”空间-ReactJS

来自分类Dev

React有条件地在特定路径中渲染组件

来自分类Dev

在特定路线和视口高度上有条件地渲染组件

来自分类Dev

如何有条件地仅对angular中的特定字段有条件地添加mydatepicker disablescince prop

来自分类Dev

根据属性值有条件地包含组件

来自分类Dev

有条件地指定组件的道具

来自分类Dev

Blazor:有条件地显示RenderFragment组件

Related 相关文章

  1. 1

    如何有条件地渲染原因反应组件?

  2. 2

    如何在Angular中有条件地渲染?

  3. 3

    有条件地反应测试库渲染组件

  4. 4

    使用hidden属性与有条件地渲染组件

  5. 5

    使用高阶组件有条件地渲染列表

  6. 6

    在 React 组件中有条件地渲染 <td>

  7. 7

    有条件地渲染 aframe 中的组件

  8. 8

    如何在useEffect中更新状态的条件组件中有条件地渲染?

  9. 9

    有条件地将CSS类应用于Angular组件宿主

  10. 10

    Angular 有条件地更改组件的包装器

  11. 11

    如何有条件地渲染使用钩子的React组件

  12. 12

    有条件地渲染JSX的React组件的更新周期如何表现?

  13. 13

    如何在redux-form的<Field>中有条件地渲染组件

  14. 14

    如何有条件地渲染两个组件?

  15. 15

    如何在有条件的组件上有条件地添加道具?

  16. 16

    如何有条件地包装React组件?

  17. 17

    如何有条件地向组件添加文本?

  18. 18

    仅当验证通过时,才有条件地使用ajax渲染组件

  19. 19

    更改单选按钮时有条件地渲染其他组件

  20. 20

    在React JSX中有条件地渲染组件部分

  21. 21

    React JS在上传时有条件地渲染动画乐透组件

  22. 22

    根据功能组件中的数据有条件地渲染元素

  23. 23

    有条件地渲染组件而不会丢失“空”空间-ReactJS

  24. 24

    React有条件地在特定路径中渲染组件

  25. 25

    在特定路线和视口高度上有条件地渲染组件

  26. 26

    如何有条件地仅对angular中的特定字段有条件地添加mydatepicker disablescince prop

  27. 27

    根据属性值有条件地包含组件

  28. 28

    有条件地指定组件的道具

  29. 29

    Blazor:有条件地显示RenderFragment组件

热门标签

归档