访问 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 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

我通过在 <modal> 标签中添加 *ngIf="dlgVisible" 解决了这个问题，所以现在

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

通过这种方式，可见性标志将对话框从 DOM 注入 to/removed。我想更改 z-index 的原因是为了让警报和其他应用程序范围内的对话框高于后来在其他组件中创建的其他对话框。改变 DOM 解决了这个问题，因为对话框插入在其他对话框之后（因此显示在其他对话框上方）。希望这会对某人有所帮助。

访问 Angular Dart 中的元素

Access elements in Angular Dart

dart

angular-dart