如何有条件地渲染角度组件

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

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

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

请注意，此方法要求捆绑所有组件，而不管在运行时实际使用哪个组件。 如果您有很多组件，或者在乎捆绑包的大小，那么最好按每个公司编译单独的捆绑包。