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

发布时间：2020-12-17 17:33:33 所属栏目：安全来源：网络整理

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

我们有一个要求,取决于静态/全局设置,根据客户需要为路径加载不同的组件.原因是他们希望应用程序的一部分具有稍微不同的功能,因此我们将为每个应用程序编写一个组件来满足他们的场景.有没有办法动态地/在运行时为路径选择组件并保持相同的路由/ 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中,这是最好的方法,或者更好的是有一个组件并在该组件上加载正确的组件,我看到的缺点是我们需要三个组件而不是两个组件.

解决方法

您可能已经在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);
  }

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!