angular 如何刷新@Input的值

Question

嘿，我试着学习@Input 以尽量减少冗余代码。

我的问题是我现在不知道如何更新我的列表

接收数据的组件

    export class DumpListComponent implements OnInit {
    @Input() dataSource: MatTableDataSource<Book>;

    openCreateBookDialog(): void {
      const dialogRef = this.dialog.open(CreateBookDialogComponent, {
      width: '360px'
    });
    dialogRef.afterClosed().subscribe(response => {
      if (response) {
        this.getBooks();
      }
    });
  }
}

我正在从其他组件导入数据源，在这个组件中有一个更新数据源的方法

发送数据的组件

  export class ViewListComponent implements OnInit {

  dataSource = new MatTableDataSource();

  constructor(private bookService: BookService, private keycloakService: KeycloakService) {

    bookService.getListOfAllBooks().subscribe(books => {
      this.dataSource = new MatTableDataSource(books);
    });

  }

  ngOnInit(): void {
  }

  getBooks(): void {
    this.bookService.getListOfAllBooks().subscribe(books => {
      this.dataSource = new MatTableDataSource(books);
    });
  }

正在注入数据源

<app-dump-list [dataSource]="dataSource"></app-dump-list>

有谁知道如何从其他组件调用此方法以便更新数据源？

谢谢你的时间

解决方案 https://angular.io/guide/inputs-outputs#sending-data-to-a-parent-component

Answer 1

您可以使用类似的 @Output 变量将自定义事件从 child 组件发送到 parent。

Child

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

export class DumpListComponent implements OnInit {
  @Input() dataSource: MatTableDataSource<Book>;
  @Output() getBooks = new EventEmitter<any>();

  openCreateBookDialog(): void {
    const dialogRef = this.dialog.open(CreateBookDialogComponent, {
      width: '360px'
    });

    dialogRef.afterClosed().subscribe(response => {
      if (response) {
        this.getBooks.emit();
      }
    });
  }
}

Parent (*.html)

<app-dump-list [dataSource]="dataSource" (getBooks)="getBooks()"></app-dump-list>

angular 如何刷新@Input的值

angular how to refresh the value of @Input

input

angular

angular-input