如何将数组从子组件传递给父组件角度8答案

【问题标题】：How to pass array from child to parent component angular 8如何将数组从子组件传递给父组件角度8
【发布时间】：2020-03-21 22:15:46
【问题描述】：

我正在制作应用程序，该应用程序顶部有一个按钮添加视频，当我点击按钮时，该按钮打开带有 4 个输入和 1 个按钮 add 的对话框添加，我想从数组视频中的输入中推送数据，比如对象。然后我想将 arrayVideos 从 add-video-form 传递给应用程序组件，并在应用程序组件的表中显示该数组（该表显示视频列表，在该列表中我有视频名称、视频 url、作者和说明。

这是一个添加视频表单：

export class AddVideoFormComponent implements OnInit {
  videoForm: FormGroup;
  @Output() public childEvent = new EventEmitter();
  arrayVideos = [];

  constructor(public dialogRef: MatDialogRef<AddVideoFormComponent>) { }

  ngOnInit() {
    this.videoForm = new FormGroup({
      videoname : new FormControl('', Validators.required),
      url : new FormControl('', Validators.required),
      author : new FormControl('', Validators.required),
      description : new FormControl('', Validators.required),
    });
  }

  onSubmit() {
    console.warn(this.videoForm.value);
    this.dialogRef.close(this.arrayVideos.push(this.videoForm.value));
    this.childEvent.emit(this.arrayVideos);
  }
}

这是一个应用组件的ts

export interface PeriodicElement {
  videoname: string;
  url: string;
  author: string;
  description: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
{videoname: 'Shakira - dance', url: 'blablablablablablabla', author: 'Shakira', description: 'some desc'},
{videoname: 'Justin - break', url: 'nanananananananananana', author: 'Justin', description: 'some desc2'},
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'Zadatak';
  exampleParent: [];

  displayedColumns: string[] = ['videoname', 'author', 'description', 'url' ];
  dataSource = ELEMENT_DATA;

  constructor(public dialog: MatDialog) {}

  openDialog() {
  this.dialog.open(AddVideoFormComponent);

  }
}

【问题讨论】：

标签： arrays angular angular-material

【解决方案1】：

您可以使用afterClosed 方法。 https://material.angular.io/components/dialog/api

const dialogRef = this.dialog.open(AddVideoFormComponent);
dialogRef.afterClosed().subscribe(x => ...);

【讨论】：