javascript - Angular 2审查系统: implementing the replays

Question

在我的 Angular 2 应用程序中，我显示了这样的组件列表(在执行 *ngFor 之后):

app.component.html

<my-example-component></my-example-component> // 1
<my-example-component></my-example-component> // 2
<my-example-component></my-example-component> // 3
<my-example-component></my-example-component> // 4
<my-example-component></my-example-component> // 5

my-example.component.html:

<h1>{{title}}</h1> // juste as example
......
<button>Click ME</button>

我想做的是，当我单击 myExample 组件中的“单击我”按钮时，我想显示另一个组件(文本区域)。就在我单击的给定 myExample 组件下方。

编辑

这是针对评论系统的，我想要在 myexampleComponent(这是单个评论)下方显示的组件是对该评论的重播。

Answer 1

演示: https://plnkr.co/edit/NzVUHpT7WQWPB2mmUlJM?p=preview

您应该使用componentFactoryResolver从myexamplecomponent<动态添加(组件)/

/*-----------comment Component start--------*/
@Component({
  selector: 'comment',
  template: `<textarea cols="20" rows="5">Hi</textarea>`
})
export class comment{}

/*-----------comment Component end--------*/

/*-----------my-example-component Component start--------*/
@Component({
  selector: 'my-example-component',
  entryComponents: [comment],
  template: `<div #target> Child {{n}}
      <button (click)="clickMe()">Add Comment</button>
  </div>`
})

export class MyExampleComponent{
  @Input() n: number;

  @ViewChild('target', {read: ViewContainerRef}) target: ViewContainerRef;
  cmpRef: ComponentRef<comment>;
  private isViewInitialized:boolean = false;

  constructor(private componentFactoryResolver: ComponentFactoryResolver, private compiler: Compiler,
      private cdRef:ChangeDetectorRef) {}


  clickMe() {
    let factory = this.componentFactoryResolver.resolveComponentFactory(comment, 2);
    this.cmpRef = this.target.createComponent(factory)
    //this.cmpRef.instance.n = 'foobar';
    //this.cdRef.detectChanges();
  }
}

/*-----------my-example-component Component end--------*/