Question

我们假设有两种产品观点，我想根据用户偏好显示其中一种观点。

我想在两个不同的文件夹中维护两个视图<my-product>，并且在用户登录后，我想根据用户更喜欢查看产品的方式从文件夹导入。

Folder 1
----MyProductComponent //exports MyProductComponent with selector <my-product></my-product>
Folder 2
----MyProductComponent //exports MyProductComponent with selector <my-product></my-product>   
App
----App.Component // here I would like to import the component at runtime from either folder 1 / 2 based on user preferences

请分享您对此的见解。如果在组件级别无法实现（例如：在路由级别），是否有任何替代方案。

Answer 1

为什么不在两个基于用户偏好交换的元素上有* ngIf？

<my-product1 *ngIf="userPref1"></my-product1>
<my-product2 *ngIf="!userPref1"></my-product2>

其中userPref1是位于App.Component上的变量（或函数），由用户输入设置。

然后用户可以说明他们的偏好，应用程序将根据他们的输入交换视图，您不再需要在运行时处理导入。

Answer 2

您应该根据用户的偏好使用[ngSwitch]，然后在*ngSwitchCase中加载该特定组件。实际上，您并不是懒惰加载组件。它们都是预加载的，但您只需使用Angular的DOM操作方法来显示或隐藏一个组件或另一个组件。

例如：

<div [ngSwitch]="someUserPreference">
    <div *ngSwitchCase="grid">
        <my-grid-list></my-grid-list>
    </div>
    <div *ngSwitchCase="card">
        <my-card-view-grid></my-card-view-grid>
    </div>
    <div *ngSwitchDefault>
        <!-- Incorrect preference, let's show grid as a fallback -->
        <my-grid-list></my-grid-list>
    </div>
</div>

基本上，当用户更改其偏好时，这将反映在代码中。要么通过按钮，单选按钮等改变首选项，您需要将该值存储在将在switch语句中使用的someUserPreference变量或属性中。

angular 2 - 如何在运行时导入/注入组件

2 个答案: