Angular 角度：将注入的数据传递给子组件

我是新手。ng——版本为Angular 8.2.6。我正在扩展其他人的应用程序

• 我有一个名为StructureDefinition的组件，它包含一个dagre-d3 visual和一个图例，其中包含六个项目（每个产品类型一个）

• 当用户单击某个项目时，将显示一个对话框（组件结构AddProductDialog）。该对话框将显示按三列排列的表单项

• 我正在构建第一列组件结构DialogColumn1。它包含一个表单和一个单独的mat select，其中包含六个mat选项项，对应于图例中的六种产品类型

• 我试图设置对话框打开时选择的mat选项。当前加载时未选择任何内容

用户在组件结构定义中单击的框通过对话框中配置变量的数据属性成功传递给子组件结构AddProductDialog

import { MatDialog, MatDialogConfig } from '@angular/material';

班级：

export class StructureDefinitionComponent implements OnChanges {
  constructor(
    private dialog: MatDialog,
    private productService: ProductService
  ) {}

  ngOnChanges(changes: SimpleChanges) {
      this.renderChart(this.dialog, this.productService);

  }

  renderChart(dialog, products) {
    const element = this.chartContainer.nativeElement;
    d3RenderChart(element, dialog, products);
  }


}

    function d3RenderChart(element, dialog, products) {

...other code here

  var productGroup = legendGroup.selectAll("g.products")
    .data(products)
    .enter().append("g")
    .attr("class","products")
    .attr("transform",function(d,i){ return "translate(10,"+((i+1)*55)+")"; })
    .on('click', function(d){ openDialog(d, dialog); });

...other code here

function openDialog(d, dialog) {

    const dialogConfig = new MatDialogConfig();
    dialogConfig.data = d;

    const dialogRef = dialog.open(StructureAddproductDialogComponent, dialogConfig);
}

子组件结构AddProductDialog接收以下数据：

@Injectable()
export class StructureAddproductDialogComponent implements OnDestroy {
  data: ProductType;

  constructor(
    private dialogRef: MatDialogRef<StructureAddproductDialogComponent>,
    private productService: ProductService,
    @Inject(MAT_DIALOG_DATA) data:ProductType

  ) {

    console.log(data);//logs the selected item correctly to console

  }

  ngOnDestroy(): void {

  }

}

我在兜圈子，想让它工作起来。你能帮忙吗

---

谢谢

我成功地做到了这一点，主要是通过添加关键字public:@Inject（MAT_DIALOG_DATA）public DATA:any

---

我还添加了一些Ngonit声明，因为我注意到事件似乎在数据准备就绪之前触发。我不确定哪一个有用（可能两者都有用）。

这是相当多的代码和信息！您是否可以在stackblitz或其他方式中创建此问题的最小复制？

  template: `

        <div class="container" id="container1">
          <h2 mat-dialog-title>Product definition</h2>
          <structure-dialog-column1 [productsTest]="productService" [chosenTest]="data"></structure-dialog-column1>
        </div> 
`

export class StructureDialogColumn1Component {


  @Input() productsTest: ProductType;
  @Input() chosenTest: ProductType;
  productForm = this.fb.group({ products: [''] });


  constructor(
    private fb: FormBuilder,
    private chosen: ProductType
  ) {

    console.log(this);//StructureDialogColumn1Component.chosenTest==undefined

  }

}