Angular2：从服务响应动态加载组件

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

导读：我知道这不是最好的解决方案,但我希望能够从JSON响应中动态加载组件,这些内容如下： app.component @Component({ selector: 'my-app',template: 'h1My First Angular 2 App/h1 {{component.title}} {{component.selector}}',providers: [AppService],directi

我知道这不是最好的解决方案,但我希望能够从JSON响应中动态加载组件,这些内容如下：

app.component

@Component({
    selector: 'my-app',template: '<h1>My First Angular 2 App</h1> {{component.title}} {{component.selector}}',providers: [AppService],directives: [ExampleComponent]
})
export class AppComponent implements OnInit {

    component:{};

    constructor(
        private _appService: AppService) {
    }

    ngOnInit() {
        this.component = this._appService.getComponent();
    }
}

app.service

@Injectable()
export class AppService {

    component = {
        title: 'Example component',selector: '<example></example>'
    }

    getComponent() {
        return this.component;
    }
}

example.component

@Component({
    selector: 'example',template: 'This a example component'
})
export class ExampleComponent  {
}

如果我运行此示例,我的输出是< example>< / example>但它实际上并没有渲染组件.我也尝试使用[innerHtml] =“component.selector”,但这也没有用.有没有人有想法或建议？

更新

创建组件的代码有所改变.
一个工作示例可以在Angular 2 dynamic tabs with user-click chosen components找到

要动态插入组件,可以使用ViewContainerRef.createComponent()

对于声明性方法,您可以使用辅助组件

@Component({
  selector: 'dcl-wrapper',template: `<div #target></div>`
})
export class DclWrapper {
  @ViewChild('target',{read: ViewContainerRef}) target;
  @Input() type;
  cmpRef:ComponentRef;
  private isViewInitialized:boolean = false;

  constructor(private resolver: ComponentResolver) {}

  updateComponent() {
    if(!this.isViewInitialized) {
      return;
    }
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }
   this.resolver.resolveComponent(this.type).then((factory:ComponentFactory<any>) => {
      this.cmpRef = this.target.createComponent(factory)
    });
  }

  ngOnChanges() {
    this.updateComponent();
  }

  ngAfterViewInit() {
    this.isViewInitialized = true;
    this.updateComponent();  
  }

  ngOnDestroy() {
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }    
  }
}

另见Angular 2 dynamic tabs with user-click chosen components

在你的例子中,你可以使用它

@Component({
    selector: 'my-app',template: '<h1>My First Angular 2 App</h1> {{component.title}} <dcl-wrapper [type]="component.type"></dcl-wrapper>',directives: [ExampleComponent]
})
export class AppComponent implements OnInit {

    component:{};

    constructor(
        private _appService: AppService) {
    }

    ngOnInit() {
        this.component = this._appService.getComponent();
    }
}

import {ExampleComponent} from './example.component.ts';

@Injectable()
export class AppService {

    component = {
        title: 'Example component',type: ExampleComponent
    }

    getComponent() {
        return this.component;
    }
}

（编辑：李大同）

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