Question

我正在Angular 2（和TypeScript）中构建一个具有不同视图/页面的模态组件。它没有标签，但概念非常相似。基本上我很难找到这样做的方法。

在我的模态组件中，我想输出不同的视图/页面。每个都应该是一个组件本身，因为它们没有任何共同的标记。另外，它们将从服务类中获取数据，因此我需要能够为每个视图编写特定的逻辑。

基本上我想要的是：

// Within my modal component's template
<div *ngFor="#view of views">
    // Render view component here
</div>

例如，views可以是组件的数组。我的第一个主要问题是我不知道如何输出我的视图（组件）的集合。

如何在另一个组件中输出组件集合？

另外，我需要一种隐藏和显示视图的方法，这是视图唯一的共同点。我想在视图中添加isActive变量并根据它显示/隐藏它们。视图组件实现ModalView接口或从基类扩展以添加此逻辑是不好的做法？从我的模态组件，我希望能够控制显示哪个视图，所以我需要视图来共享这个逻辑。

我希望很清楚我想做什么。解决方案可能很简单，但是现在我对如何解决这个问题感到有些困惑。一个代码示例将非常感谢！

Answer 1

您可以创建一个＆＃34;组件工厂＆＃34;作为使用DynamicComponentLoader加载适当组件的指令，基于您从模态传递的参数。

<component-factory *ngFor="#view of views" 
    (loaded)="addComponent($event)"
    [name]="view.name" 
    [visible]="view.visible"></component-factory>

@Directive({ selector: 'component-factory' })
class ComponentFactory {
  @Input() name;
  @Input() visible;
  @Output() loaded = new EventEmitter();
  constructor(
    private _dcl: DynamicComponentLoader, 
    private _eref: ElementRef) {

  // import OneCmp, TwoCmp in this file...
  private components: { one: OneCmp, two: TwoCmp }

  ngOnInit() {
    this._dcl.loadNextToLocation(
      this.components[this.name], 
      this._eref)
      // pass values to the loaded components
      // and send it's instance to the parent
      .then((ref: ComponentRef) => {
        ref.instance.visible = this.visible;
        this.loaded.emit(ref.instance)
      });
  }
}

Answer 2

Angular2动态渲染模板

import { Component, View, DynamicComponentLoader, ElementRef} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'

@Component({
    selector: 'some-component',
    properties: ['greeting'],
    template: `
    <b>{{ greeting }}</b>
  `
})
class SomeComponent { }




@Component({
    selector: 'app'
})
@View({
    template: `
    <h1>Before container</h1>
    <div #container></div>
    <h2>After container</h2>
  `
})
class App {
    loader: DynamicComponentLoader;
    elementRef: ElementRef;

    constructor(loader: DynamicComponentLoader, elementRef: ElementRef) {
    this.laoder = loader;
    this.elementRef = elementRef;

    // Some async action (maybe ajax response with html in it)
    setTimeout(() => this.renderTemplate(`
      <div>
    <h2>Hello</h2>
    <some-component greeting="Oh, hey"></some-component>
      </div>

完整代码：https://github.com/guyoung/GyPractice-Angular2Advanced/tree/master/apps/dynamically_render_template

在Angular 2中输出组件数组

2 个答案: