如何通过点击事件与父子组件进行通信

Question

我有一个 Angular 8 应用程序。我有父母和孩子的关系。

所以我在父 DossierCorrespondenceComponent 中有一个函数，但该函数必须在子组件中触发。

所以我在父级中有这个函数：

@Input()  myGotoItem: Function;


gotoItem(index, type: string) {
    this.showingSingle = true;

    switch (type) {
      case 'correspondence': {
        this.single = this.correspondenceEntries[index];
        break;
      }
      case 'attachments': {
        this.single = this.attachmentEntries[index];
        break;
      }
      default: {
        break;
      }
    }
    this.showingSingle = true;
  }

我尝试在子组件 DossierCorrespondenceListComponent 中调用它，如下所示：

@Input()  myGotoItem: Function;


gotoItem(index, type: string) {
    this.showingSingle = true;

    switch (type) {
      case 'correspondence': {
        this.single = this.correspondenceEntries[index];
        break;
      }
      case 'attachments': {
        this.single = this.attachmentEntries[index];
        break;
      }
      default: {
        break;
      }
    }
    this.showingSingle = true;
  }

但什么也没发生

那么我必须改变什么？

但我有另一个组件 DossierCorrespondenceAttachmentsComponent 也使用该功能：

 <tr class="dossier-correspondencerow" *ngFor="let entry of correspondenceEntries; let i = index" (myGotoItem)="gotoItem(i, entry.type)">

因此，如果我必须将函数移动 gotoItem(index, type: string)到两个子组件，那么我就会有重复的代码。

我现在在父组件中拥有这样的内容：

 <tr class="dossier-correspondencerow" *ngFor="let entry of attachmentEntries; let i = index" (click)="gotoItem(i, entry.type)">

和 ts 父组件：

gotoItem(index, type: string) {
    this.showingSingle = true;

    switch (type) {
      case 'correspondence': {
        this.single = this.correspondenceEntries[index];
        break;
      }
      case 'attachments': {
        this.single = this.attachmentEntries[index];
        break;
      }
      default: {
        break;
      }
    }
    this.showingSingle = true;
  }

和子组件：

<ng-container *ngIf="correspondenceEntries">
    <app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" (onClick)="gotoItem(i, entry.type)"> </app-dossier-correspondence-list>
  </ng-container>

和 ts 子组件：

export class DossierCorrespondenceListComponent implements OnInit {

  @Input()
  correspondenceEntries: DossierEntry[];

  @Output()
  onClick = new EventEmitter();

  @Input() showingSingle;

  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes) { console.log(changes)}

  click() {
    this.onClick.emit();
  }


}

但后来我得到这个错误：

gotoItem(index, type: string) {
    this.showingSingle = true;

    switch (type) {
      case 'correspondence': {
        this.single = this.correspondenceEntries[index];
        break;
      }
      case 'attachments': {
        this.single = this.attachmentEntries[index];
        break;
      }
      default: {
        break;
      }
    }
    this.showingSingle = true;
  }

我改变了这一点：

 click() {
    this.onClick.emit(true);
  }

  <tbody class="dossier-tablebody">
          <tr class="dossier-correspondencerow" *ngFor="let entry of correspondenceEntries; let i = index" (click)="gotoItem(i, entry.type)">
            <td>{{ entry.date | date:"dd-MM-y" }}</td>
            <td>{{ entry.name }}</td>
          </tr>
        </tbody>

Answer 1

父组件：

\n\n

<child (onClick)="gotoItem()"></child>\n\ngotoItem() {\n    //do something\n}\n

\n\n

子组件：

\n\n

<tr class="dossier-correspondencerow" *ngFor="let entry of attachmentEntries; let i = index" (click)="click()">\n\n@Output() onClick = new EventEmitter();\n\nclick() {\n    // do something\n    this.onClick.emit()\n}\n

\n\n

\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2 \x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86 \x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93 \xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93\xe2\x86\x93

\n\n

父组件(h​​tml)

\n\n

<app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" (onClick)="gotoItem($event)"> </app-dossier-correspondence-list>\n

\n\n

父组件(ts)

\n\n

import { Component } from \'@angular/core\';\n\n@Component({\n  selector: \'my-app\',\n  templateUrl: \'./app.component.html\',\n  styleUrls: [ \'./app.component.css\' ]\n})\nexport class AppComponent  {\n\n  gotoItem(e) {\n    console.log(e)\n  }\n\n}\n

\n\n

子组件

\n\n

import { Component, Input, Output, EventEmitter } from \'@angular/core\';\n\n@Component({\n  selector: \'app-dossier-correspondence-list\',\n  template: `\n    <table>\n      <tr *ngFor="let entry of attachmentEntries; let i = index" (click)="click(i, entry.type)">\n        {{entry.type}}\n      </tr>\n    </table>\n  `\n})\nexport class AppDossierCorrespondenceComponent  {\n\n  @Input() correspondenceEntries: any;\n  @Output() onClick = new EventEmitter();\n\n  attachmentEntries = [\n    { type: \'type1\' },\n    { type: \'type2\' },\n    { type: \'type3\' },\n  ]\n\n  click(i, type) {\n    this.onClick.emit({\n      i: i,\n      type: type\n    })\n  }\n\n}\n

\n\n

链接： https: //stackblitz.com/edit/angular-ev6e5n

\n