Question

我有一个生成按钮列表的组件，我想绑定click事件以显示子组件。我让它适用于单个按钮/组件，但它使用的局部变量对每个按钮具有相同的值，因此无法正常工作：

<div *ngFor="let key of keys">
  <button (click)="child.toggleCollapse()">
    Display
  </button>
  <app-child-component #child [key]="key"></app-child-component>
</div>

所以我的问题是＆＃39;孩子＆＃39;是每个按钮/子项的值相同，并始终打开最后一个子项。我的想法是以某种方式绑定关键＆＃39;进入＆＃39;＃孩子＆＃39; ID。

在angular2中执行此操作的正确方法是什么？

Answer 1

在我的应用程序中，我使用类似于以下解决方案的解决方案：

在父组件中，您可以保留当前扩展的子ID（如果没有扩展子组，则为-1）。您可以使用@Input将唯一的子ID和当前扩展的子ID传递给每个子项（将数据从父项传递到子项）。因此，每个孩子都知道它的ID并且还知道它当前是否被扩展（index === expandedIndex）。如果要扩展/折叠子项（例如，在点击子项后），您可以使用@Output和EventEmitter（将数据从子项传递到父项）发送到父项以更改当前扩展的子ID。

父组件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <div *ngFor="let key of keys; let index = index">
    <app-child [key]="key" [index]="index" [expandedIndex]="expandedIndex" (changeIndex)="onChangeIndex($event)"></app-child>
  </div>
  `
})
export class AppComponent {

  keys: string[] = ['a', 'b', 'c'];
  expandedIndex: number = -1;

  onChangeIndex(index: number) {
    if (this.expandedIndex === index) {
      this.expandedIndex = -1;
    } else {
      this.expandedIndex = index;
    }
  }

}

子组件

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
  <div style="margin-top: 20px; border: 1px solid #ddd">
    <button (click)="onExpand()">{{expandedIndex !== index ? 'Expand' : 'Collapse'}}</button>
    <div *ngIf="expandedIndex === index">
      <p>{{key}}</p>
    </div>
  </div>
  `
})
export class ChildComponent implements OnInit {

  @Input() key: string;
  @Input() index: number;
  @Input() expandedIndex: number;
  @Output() changeIndex = new EventEmitter<number>();

  constructor() { }

  ngOnInit() {
  }

  onExpand() {
    this.changeIndex.emit(this.index);
  }

}

angular2生成按钮列表，单击绑定到组件

1 个答案: