Question

我是Angular的新手。 ng --version表示Angular 8.2.6。我正在扩展别人的应用程序。

我有一个组件StructureDefinition，其中包含dagre-d3视觉效果以及图例，其中包含六个项目（每种产品类型一个）。
当用户单击一个项目时，将出现一个对话框（组件StructureAddProductDialog）。对话框将显示排列为三列的表单项。
我正在构建第一列，即组件StructureDialogColumn1。它包含一个表单，并且当前具有一个单一的垫选择，带有六个垫选择项，对应于图例中的六个产品类型。
我试图设置对话框打开时选择的mat选项。目前，没有选择加载任何内容。

通过对话框中config变量的data属性，用户在组件 StructureDefinition 中单击的框已成功传递到子组件StructureAddProductDialog。

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);
}

子组件StructureAddProductDialog接收数据：

@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 {

  }

}

然后我尝试将选定的数据作为selectedTest传递给最终的列组件：

  template: `

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

productsTest数据可以正常使用，但在StructureDialogColumnColumn1中未定义selectedTest：

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

  }

}

我正在圈子里努力使它工作。你能帮忙吗？

谢谢！

Answer 1

我设法做到这一点，主要是通过添加关键字public：@Inject（MAT_DIALOG_DATA）public data：any

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

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

1 个答案: