Элементы доступа в Angular Dart - PullRequest
Новая
       15

Элементы доступа в Angular Dart

0 голосов
/ 06 мая 2019

У меня есть элемент верхнего уровня <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, который содержит модалы, как на изображении enter image description here Мне нужно получить доступ к <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"); Есть ли способ получить доступ к элементу?

1 Ответ

0 голосов
/ 06 мая 2019

Я решил это, добавив *ngIf="dlgVisible" к тегу <modal>, так что теперь он 

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

Таким образом, диалог вводится в DOM или удаляется из DOM с помощью флага видимости.Причина, по которой я захотел изменить z-index, заключалась в том, чтобы получать оповещения и другие широкие диалоги приложения над другими диалогами, созданными позже в других компонентах.Изменение DOM решает эту проблему, когда диалоги вставляются после (и, следовательно, отображаются выше) других диалогов.Надеюсь, это кому-нибудь поможет.

...