Angular2根据全局设置为路径加载不同的组件

Question

我们有一个要求,取决于静态/全局设置,根据客户需要为路径加载不同的组件.原因是他们希望应用程序的一部分具有稍微不同的功能,因此我们将为每个应用程序编写一个组件来满足他们的场景.有没有办法动态地/在运行时为路径选择组件并保持相同的路由/ URL.以下是我们希望实现的简化示例:

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

路线:

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

在此实例中,CustomerComponentProvider将在内部检查设置,并返回CustomerOneComponent或CustomerTwoComponent.

在angular2/4中,这是最好的方法,或者更好的是有一个组件并在该组件上加载正确的组件,我看到的缺点是我们需要三个组件而不是两个组件.

Answer 1

您可能已在CustomerComponentProvider中内部执行此操作,但如果不是 - 则存在Dynamic Component Loader.

文档中给出的示例有点忙,所以这里是一个愚蠢的版本: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

您可以随时更新路由器配置，因此根据您的设置，您可以添加或更新路由配置以解析为您需要的组件。

查看config 属性，或者可能更适合此操作，路由器上的ResetConfig方法。您可以将Router注入到要处理此问题的组件中，并根据您拥有的全局设置更新路由。