Angular 5 : how to refer to a subcomponent method from a parent component HTML template?

Question

我有一个对话框子组件DeleteAssociationDialog，其中有一个openDeleteAssociationDialog方法:

删除关联对话框.component.ts

import { Component } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material';

@Component({
  selector: 'app-delete-association-dialog',
  templateUrl: 'delete-association-dialog.component.html',
  styleUrls: ['delete-association-dialog.component.css']
})
export class DeleteAssociationDialogComponent {

  constructor(
  public dialog: MatDialog,
  public dialogRef: MatDialogRef<DeleteAssociationDialogComponent>) { }

  openDeleteAssociationDialog(): void {
    let dialogRef = this.dialog.open(DeleteAssociationDialogComponent, {
      width: '250px'
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }
}

当单击父组件(app.component)HTML 中的按钮时，应该显示该对话框，我使用 @ViewChild 来建立引用:

app.component.html [片段]

<button mat-icon-button color="warn" (click)="child.openDeleteAssociationDialog()">
  <mat-icon>delete</mat-icon>
</button>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material';

import { AppComponent } from './app.component';
import { DeleteAssociationDialogComponent } from './delete-association-dialog/delete-association-dialog.component';

import { MatDialogRef} from '@angular/material/dialog'

@NgModule({
  declarations: [
    AppComponent,
    DeleteAssociationDialogComponent,
  ],
  entryComponents: [DeleteAssociationDialogComponent],
  imports: [
    BrowserModule,
    NgModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatInputModule,
    FormsModule
    MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material';
import { DeleteAssociationDialogComponent } from './delete-association-dialog/delete-association-dialog.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css', './app.component.panel.css']
})
export class AppComponent {
  @ViewChild('DeleteAssociationDialogComponent') child: DeleteAssociationDialogComponent;
}

出现错误-- “错误类型错误:无法读取未定义的属性‘openDeleteAssociationDialog’”

我错过了什么？如何从父组件 HTML 模板中正确引用子组件方法？

Answer 1

我认为问题源于这样一个事实:打开对话框的方法包含在对话框本身中。因此，除非对话框已经打开，否则该方法不会存在...对话框组件既是鸡又是蛋。

解决方案是将 openDeleteAssociationDialogComponent 方法移至父级。

然后就很简单了:

<button (click)="openDeleteAssociationDialogComponent()"></button>

如果您想将其抽象出来以使对话框打开按钮可重用，您可以执行以下操作:

组件.html

<association-deleter></association-deleter>

组件.ts

@Component({
  selector: 'association-deleter',
  template: `<button (click)="openDialog()"></button>`
})
export class DeleteAssociationComponent {
  constructor(
    public dialog: MatDialog,
    public dialogRef: MatDialogRef<DeleteAssociationDialogComponent>
  ){}

  openDeleteAssociationDialog(): void {
    let dialogRef = this.dialog.open(DeleteAssociationDialogComponent, {
      width: '250px'
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }
}

然后您可以重复使用打开删除关联对话框的按钮。