Angular2 Load different components for a route depending on global settings

Question

We have a requirement in which, depending on the static / global setting that will be set depending on the client, they want another component to load for the route. The reason is that they want to differ slightly from the functionality for the part of the application, so we are going to write a component for each that suits their scripts. Is there a way to select the component for the route dynamically / at runtime and keep the same route / url. The following is a simplified example of what we would like to achieve:

Component1:

@Component({
  selector: 'customeronecomponent',
  templateUrl: './customeronecomponent.component.html'
})

export class CustomerOneComponent implements OnInit {
}

Component2:

@Component({
  selector: 'customertwocomponent',
  templateUrl: './customertwocomponent.component.html'
})

export class CustomerTwoComponent implements OnInit {
}

Route:

{ path: 'home', component: CustomerComponentProvider },

In this case, the CustomerComponentProvider will internally check the configuration and return a CustomerOneComponent or CustomerTwoComponent.

angular2/4 , , , , , .

Answer 1

, CustomerComponentProvider, - .

, , , : Plunker

, , .

import { Component, Input, OnChanges, 
  ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { Component1 } from './component1';
import { Component2 } from './component2';

@Component({
  selector: 'component-wrapper',
  template: `<div></div>`
})
export class ComponentWrapper implements OnChanges {

  @Input() config;

  private componentMap = {
    component1 : Component1,
    component2 : Component2,
  }

  constructor(
    private viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {}

  ngOnChanges() { 
    this.setComponent();
  }

  setComponent() {
    const componentFactory = this.componentFactoryResolver
      .resolveComponentFactory(this.componentMap[this.config]);
    this.viewContainerRef.clear();
    this.viewContainerRef.createComponent(componentFactory);
  }

}

Answer 2

, , , , , .

, , , resetConfig . Router , , , .

Answer 3

CustomerComponentProvider, ,

, (1/2), showCustomerOne/showCustomerTwo true

<app-customer-one-component *ngIf="showCustomerOne"> </app-customer-one-component>
<app-customer-two-component *ngIf="showCustomerTwo"> </app-customer-two-component>

check the setting in the CustomComponentProvider constructor and set showCustomerOne to True or showCustomerTwo to True.

  showCustomerOne;
  showCustomerTwo;

  constructor() {
     if(customer.type == '1'){
         this.showCustomerOne = true;
      }else if (customer.type == '2'){
         this.showCustomerTwo = true;
      }
  };

Answer 4

You can try something like reflect-metadata

You must determine the metadata key for the type, and then get the type of the component based on what is in your configuration and feed, in routeConfigor by resetting the router through router.resetConfig, as @Adrian Faciu already suggested:

https://angular.io/api/router/Router#resetConfig