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组件中的“click me”按钮时，我想显示另一个组件（文本区域）。就在我点击的给定myExample组件的下方。

修改

这是一个评论系统，我想在myexampleComponent（这是一个评论）下面显示的组件是该评论的重播。

Answer 1

DEMO ： https://plnkr.co/edit/NzVUHpT7WQWPB2mmUlJM?p=preview

您应该使用 componentFactoryResolver 从 (component)

动态添加 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--------*/

Answer 2

我将如何做到这一点：

在父组件中定义：showIndex = null;并在您想要再次隐藏它时将其设置为null。

父组件视图：

<div template="ngFor let item of [1,2,3,4,5]; let i = index;">
<my-example-component (onShowMore)="showIndex = i"></my-example-component>
  <div *ngIf="showIndex === i">More stuff in here</div>
</div>

MyExampleComponent：

@Component({
    selector: 'my-example-component',
    template: `<div style="border: 1px solid salmon"><button (click)="onShowMore.emit(null)">Show More</button></div>`
})

export class MyExampleComponent
{
    @Output() onShowMore = new EventEmitter<any>();
}

编辑如何在子组件中切换内容（代码未测试）：

import {Component, Output, EventEmitter, Input} from "@angular/core"

@Component({
    selector: 'Parent',
    template: `<child *ngFor="let item of [1,2,3,4,5]; let i = index;"(onShowMore)="onShowMore($event)" [index]="i" [showIndex]="showIndex"></child>`
})

export class ParentComponent
{
    private showIndex: number | null;

    ngOnInit()
    {
        this.showIndex = null;
    }

    onShowMore(childIndex)
    {
        this.showIndex = childIndex
    }
}


@Component({
    selector: 'child',
    template: `
            <div>
              <button (click)="showIndex === index ? hide() : show()">
                {{showIndex === index ? 'Hide me' : 'Show me'}}
              </button>
            </div>
            <div *ngIf="showIndex === index">This is more content</div>
            `
})

export class ChildComponent
{
    @Input() showIndex: number | null;
    @Input() index: number;
    @Output() onShowMore = new EventEmitter<number | null>();


    show()
    {
        this.onShowMore.emit(this.index);
    }

    hide()
    {
        this.onShowMore.emit(null);
    }
}

Angular 2评论系统：实施重播

2 个答案: