javascript - Angular 7 调用 ngOnInit 方法或组件包含的任何其他组件方法

Question

我有这种情况，我有一个名为 user-table-list 的组件，它基本上是一个表，其中包含代表一些用户的条目。
该组件被设计成有另一个组件，称为 table-list，它描述了一个表及其对几个组件的行为(user-table-list 就是其中之一) ). user-table-list 的 html 实际上是这样的:

<app-table-list #table [tableConfiguration]="usersTableConfiguration"></app-table-list>

table-list 的 html 包含表格的所有设计，描述列、标题等...，而单个组件在 .ts 文件中描述其个人表格的配置，这意味着他们加载哪些数据来填充表、列的名称等等。

在标题中有一个按钮可以将新条目添加到表中，可以是用户或客户或其他任何内容。事件和数据库检索在 table-list.component.ts 中处理，它根据事件来自哪种类型的表执行不同的 onclick 操作。类似的东西:

createNewButtonClicked(tableType: string) {
    
    const dialogConfig = new MatDialogConfig();
    dialogConfig.width = '60%';
    dialogConfig.autoFocus = true;

    switch (tableType) {
        case 'clients': {
            this.dialog.open(ClientDialogComponent, dialogConfig);
            break;
        }
        case 'projects': {
            this.dialog.open(ProjectDialogComponent, dialogConfig);
            break;
        }  
        case 'users':{
            this.dialog.open(UserDialogComponent, dialogConfig);
            break;
        }
    }
}

在打开的对话框中，一个新的客户/项目/用户被添加到列表中。我想要的是在关闭对话框后通过调用数据库检索方法刷新列表。但是这种检索是在单个组件内部调用的，例如 user-table-list。所以我正在寻找一种方法来调用检索方法并从外部刷新 user-table-list 的列表，而不必从浏览器刷新页面。问题是我无法实现，无论是在对话框组件还是表格列表组件中。我已经尝试在构造函数中导入组件并在对话框和表列表组件中调用该方法，但它会发出循环引用警告并且什么都不做。如果我创建一个外部服务来调用该方法，也是如此，因为总是存在循环引用。
我别无选择；如何做到这一点？
很遗憾，我无法更改应用程序设计。

Answer 1

假设您使用的是 Material 对话框，该对话框会为您提供一个可观察对象，您可以观察该对话框何时关闭。如果您将它设置为一个变量，您可以在它关闭时观察它，例如:

createNewButtonClicked(tableType: string) {
    // your existing logic
    // ... 
    const dialog = this.dialog.open(ClientDialogComponent, dialogConfig);
    // example dialog .afterClosed
    dialog.afterClosed().subscribe(closeResult => {
        // update from database after dialog is closed
    });
}

您可以使用 Output 属性告诉父组件子组件内部发生了一些事情。在订阅函数内部(我在其中添加评论以更新数据库)是您想要发出对话框已关闭的地方。您的列表代码可能如下所示: @Output() dialogClosed = new EventEmitter();

createNewButtonClicked(tableType: string) {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.width = '60%';
    dialogConfig.autoFocus = true;
    let dialog;
    switch (tableType) {
        case 'clients': {
            dialog = this.dialog.open(ClientDialogComponent, dialogConfig);
            break;
        }
        case 'projects': {
            dialog = this.dialog.open(ProjectDialogComponent, dialogConfig);
            break;
        }  
        case 'users':{
            dialog = this.dialog.open(UserDialogComponent, dialogConfig);
            break;
        }
    }
    // check to see if dialog was opened
    if (!!dialog) {
        dialog.afterClosed().subscribe(closeResult => {
            // emit that dialog was closed
            this.dialogClosed.next();
        });
    }
}

然后在您的用户表组件中观察要发出的事件:

<app-table-list (dialogClosed)="onDialogClosed($event)"></app-table-list>

最后是你的用户表 ts。请注意，当对话框关闭时我没有调用 ngOnInit，因为 ngOnInit 的目的是初始化。所以将ngOnInit里面的数据库逻辑提取到另一个方法中，并在对话框关闭时调用这个方法来更新数据:

ngOnInit() {
  this.getData();
}

onDialogClose() {
    this.getData();
}

private getData() {
  // make database calls here and update data from response
}

您应该只使用 ngOnInit 来初始化 View ，因为您可能会在此处设置一些您不想重置的默认值，因此建议不要在页面生命周期的后期再次调用 ngOnInit