Angular Dart中的访问元素

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，其中div包含图像上的模态 我需要访问<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始终为null。我也尝试过var alertDlg = querySelector(".alert-dialog"); 有什么方法可以访问元素？

Answer 1

我通过在*ngIf="dlgVisible"标记中添加<modal>来解决了问题，现在是了

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

这样，通过可见性标志将对话框注入DOM或从DOM中删除。我想要更改z-index的原因是要使警报和其他应用程序范围的对话框高于稍后在其他组件中创建的其他对话框。 更改DOM可解决此问题，因为将对话框插入到其他对话框之后（并显示在其他对话框上方）。希望这会帮助某人。