如何将数据传递到角材底页

Question

我使用Angular Material和Angular6。我在材质对话框中做了很多工作，我这样做是这样的：

openDialog3(key : string): void {
  let dialogRef = this.dialog.open(PPSDialogRemoveComponent, {width: '1000px'}); 
  dialogRef.componentInstance.key = key;
}

现在，我想使用角度材质底片。要将密钥传递给我的底部组件，请尝试以下操作：

  openBottomSheet(key: string): void {
    let dialogRef = this.bottomSheet.open(BottomSheetOverviewExampleSheet);
    dialogRef.componentInstance.key = key;
}

但是我有这个错误

src / app / geo / geo.component.ts（568,15）中的错误：错误TS2339：类型“ MatBottomSheetRef”上不存在属性“ componen实例”。

谢谢你的帮助

Answer 1

从Angular材质复制：与底部工作表组件共享数据。

如果要将某些数据传递到底部工作表，则可以使用data属性进行传递：

const bottomSheetRef = bottomSheet.open(HobbitSheet, {
  data: { names: ['Frodo', 'Bilbo'] },
});

之后，您可以使用MAT_BOTTOM_SHEET_DATA注入令牌访问注入的数据：

import {Component, Inject} from '@angular/core';
import {MAT_BOTTOM_SHEET_DATA} from '@angular/material';

@Component({
  selector: 'hobbit-sheet',
  template: 'passed in {{ data.names }}',
})
export class HobbitSheet {
  constructor(@Inject(MAT_BOTTOM_SHEET_DATA) public data: any) { }
}

注意：Angular Material的版本是v7.0.3

检查一下： 与底部工作表组件共享数据

Answer 2

componentInstance 属性仅适用于使用 ComponentFactoryResolver 方法创建并使用 ViewContainerRef 插入 DOM 的动态组件。

根据 Angular Material Doc，dialog.open 返回模型弹出窗口的引用。https://material.angular.io/components/dialog/api