Question

我有一个名为Legend的棱角组件，其HTML内容如下所示。

legend.component.html

<div class="NotAModalContent">
   <label class="mat-option-text-label" (click)="openProficiencyLegendDialog()">Proficiency?</label>
</div>
<mat-dialog-content>
       Modal data content goes here
</mat-dialog-content>
<mat-dialog-actions>
        Dialog actions goes here
</mat-dialog-actions>

然后，我将打开该组件，作为另一个名为“技能”的组件的对话框，如下所示。

skills.Component.ts

openProficiencyLegendDialog(): void {
    this.dialog.open(LegendComponent, {
      width: '500px'
    });
  }

但是在这里，我不希望图例组件的非模态内容成为对话框的一部分。

可能类似于

openProficiencyLegendDialog(): void {
        this.dialog.open('Specify Div Tag instead of component', {
          width: '500px'
        });
      }

这个想法是使这个模态组件可重用。我想在哪里使用此模型对话框，我只需要使用

Answer 1

如果只需要组件中的特定内容，则应使用ng-template。在ng-template中包装您想要的内容，并引用模板而不是组件本身。我发现使用TemplateRef而不使用https://stackblitz.com/edit/ng-template-mat-dialog?file=app%2Fapp.component.html

可以很好地说明这一点

是否可以从div标签而不是Angular Material中的Component提取模态内容

1 个答案: