angular - 如何将数据传递给 Angular Material Bottom Sheet

Question

我使用 Angular Material 和 Angular 6。 我经常使用 Material 对话，我是这样的:

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

现在我想使用 Angular Material Bottom Sheet 。要将 key 传递到我的底部组件，我尝试这样做:

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

但是我有这个错误

ERROR in src/app/geo/geo.component.ts(568,15): error TS2339: Property 'componen Instance' does not exist on type 'MatBottomSheetRef'.

谢谢你的帮助

Answer 1

复制自Angular Material : 与bottom sheet组件共享数据。

如果你想将一些数据传递到 Bottom Sheet ，你可以使用数据属性:

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

之后您可以使用 MAT_BOTTOM_SHEET_DATA 注入(inject) token 访问注入(inject)的数据:

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

检查一下: Sharing data with the bottom sheet component