ANGULAR.js 将函数从一个组件传递到另一个组件

Question

我正在尝试用 angular 12.

构建一个 pokedex 项目

我想在我的宠物小精灵中传递一个 openDialog() 函数-list.component.html

但是 openDialog() 是在名为 Dialog 的单独组件中定义的。我在下面附上了项目结构。

这是我得到的错误： (index):1 Uncaught ReferenceError: openDialog is not defined 在 HTMLButtonElement.onclick ((index):1)

这就是我所做的：在我的 html 列表组件文档中

<button id="button" onclick="openDialog()">More Stats</button>

并在 dialog.component.ts

import { Component } from '@angular/core';
import {MatDialog} from '@angular/material/dialog';
import { BehaviorSubject } from 'rxjs';



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

  constructor(public dialog: MatDialog) { }

  public openDialog() {
    this.dialog.open(dialogComponent);
    
  }
}

我的最终目标是在单击按钮后显示一个对话框

Answer 1

如果此代码在 pokemon-list.component.html 中：

<button id="button" (click)="openDialog()">More Stats</button>

那么，我认为这个函数：

public openDialog() {
    this.dialog.open(dialogComponent);
}

应该在pokemon-list.component.ts。这样，单击按钮时，将调用 openDialog 函数并打开 dialogComponent.

ANGULAR.js 将函数从一个组件传递到另一个组件

ANGULAR.js passing function from one component to another

typescript

angular-ui-router

angular