eckig 2 - So importieren/injizieren Sie eine Komponente zur Laufzeit

Question

Angenommen, es gibt zwei Ansichten des Produkts, und ich möchte eine dieser Ansichten basierend auf Benutzereinstellungen anzeigen.

Ich denke, dass zwei Ansichten <my-product> in zwei verschiedenen Ordnern verwaltet werden und nachdem Benutzer angemeldet ist, möchte ich aus einem Ordner basierend darauf importieren, wie der Benutzer das Produkt anzeigen möchte.

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 

Bitte teilen Sie Ihre Erkenntnisse dazu. Gibt es Alternativen, wenn dies auf Komponentenebene nicht erreicht werden kann (zB auf Routing-Ebene)?

Answer 1

Warum nicht einfach ein * ngIf auf zwei Elementen haben, die basierend auf den Präferenzen des Benutzers ausgetauscht werden?

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

Wo userPref1 ist eine Variable (oder die Funktion), die auf App.Component die durch eine Benutzereingabe eingestellt wird.

Dann kann der Benutzer ihre Präferenz angeben und die Anwendung wird die Ansichten basierend auf ihrer Eingabe tauschen und Sie müssen nicht mehr mit dem Import zur Laufzeit beschäftigen.

Answer 2

Sie sollten [ngSwitch] basierend auf den Vorlieben des Benutzers verwenden und dann in *ngSwitchCase diese bestimmte Komponente laden. In Wirklichkeit laden Sie Ihre Komponenten nicht faul. Sie sind alle vorinstalliert, aber Sie verwenden nur die DOM-Manipulationsmethoden von Angular, um die eine oder die andere Komponente ein- oder auszublenden.

Zum Beispiel:

<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> 

Grundsätzlich, wenn ein Benutzer ihre Präferenz ändert, wird dies in dem Code reflektiert werden. Entweder ändern sie die Voreinstellung über eine Schaltfläche, eine Optionsschaltfläche oder was auch immer. Sie müssen diesen Wert in someUserPreference Variable oder Eigenschaft speichern, die in der switch-Anweisung verwendet wird.