角飞镖中的存取元件

Question

我有一个带有嵌套模态对话框的顶级元素<x-app>。

<x-app>
  <material-content>
  ...
  </material-content>
  <x-alert-dialog></x-alert-dialog>
</x-app>

其中<x-alert-dialog>包含

<modal [visible]="dlgVisible" dialog-id="alert-dialog-modal">
  <material-dialog class="alert-dialog">
  ....
  </material-dialog>
</modal>

生成的HTML包含<x-app>和覆盖容器div，其中包含图像中的modals。

我需要的是访问<div pane-id="default-1"...>来更改z-index。我也不知道该怎么做。我不能在CSS中访问它，因为任何通过:host的引用都是不可能的。我试着用x-app组件编程访问它。我有过

class AppComponent implements AfterViewInit {

  @override
  void ngAfterViewInit() {
    var doc = getDocument();
    var alertDlg = doc.querySelector(".alert-dialog");
    var alertPane = alertDlg.parent;
  }
}

但是alertDlg总是空的。我也尝试过var alertDlg = querySelector(".alert-dialog");，有什么方法可以访问元素吗？

Answer 1

我通过将*ngIf="dlgVisible"添加到<modal>标记来解决这个问题，所以现在

<modal *ngIf="dlgVisible" [visible]="dlgVisible" dialog-id="alert-dialog-modal">

这样，通过可见性标志将对话框注入DOM /从DOM中删除。我想要更改z索引的原因是为了获得警报和其他应用程序范围的对话框，而不是稍后在其他组件中创建的其他对话框。更改DOM解决了这个问题，因为对话框是在其他对话框之后插入的(因此显示在上面)。希望这能帮上忙。