angular dart querySelector не находит элемент в модальном

Я не могу найти элемент внутри модального элемента. У меня есть простой компонент со следующим шаблоном

<modal>
  <select id="pickItem">
    <option value="1">one</option>
    <option value="2">two</option>
  </select>
</modal>

в моем ngOnInit я помещаю код

SelectElement select = querySelector("#pickItem");
print(select);

Я получаю ноль. Если я изменю модальные теги на div, это сработает. Есть ли угловой предпочтительный способ обработки элементов запроса?

Вот пример, показывающий, что ViewChild не работает. ViewChild работает с первым компонентом. IE:

import 'dart:html';

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';

@Component(
    selector: 'my-app',
    template:'''
      <select #mySelect>
        <option value="1">one</option>
        <option value="2">two</option>
      </select>
    ''',
    directives: const [formDirectives]
)
class AppComponent implements AfterViewInit {
  @ViewChild("mySelect")
  SelectElement element;

  @override
  ngAfterViewInit() {
    print(element);
  }
}

Это выведет «выбрать» на консоль при запуске.

Если он находится в дочернем компоненте, он не работает.

app_component.dart

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'child_component.dart';

@Component(
    selector: 'my-app',
    template:'''
      <child-component></child-component>
    ''',
    directives: const [formDirectives, ChildComponent]
)
class AppComponent implements AfterViewInit {
  @override
  ngAfterViewInit() {
  }
}

child_component.dart

import 'dart:html';

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';

@Component(
    selector: 'child-component',
    template:'''
      <select #mySelect>
        <option value="1">one</option>
        <option value="2">two</option>
      </select>
    ''',
    directives: const [formDirectives]
)
class ChildComponent implements AfterViewInit {
  @ViewChild("myselect")
  SelectElement element;

  @override
  ngAfterViewInit() {
    print(element);
  }
}

Это выведет «null» на консоль при запуске.


person cjmarques    schedule 17.06.2019    source источник
comment
Попробуйте поместить свой код в ngAfterViewInit   -  person Sergey    schedule 17.06.2019
comment
ваш дом еще не доступен на крючке жизненного цикла ngOnInit, предпочитайте использовать ngAfterViewInit. Вы также должны посмотреть на выбор ViewChild ElementRef.   -  person Yanis-git    schedule 17.06.2019
comment
Взгляните на этот ответ stackoverflow.com/a/51970674/8745788   -  person Mattia    schedule 17.06.2019
comment
Мне вообще не удалось заставить ViewChild работать. Я запустил совершенно новое приложение (stagehand web-angular) и добавил выбор в компонент todo-list. затем в дротике компонента добавлен метод viewchild для доступа к нему, и он вернул значение null. Мне удалось заставить метод querySelector работать с ним, но только тогда, когда элемент select не находится внутри модального элемента.   -  person cjmarques    schedule 17.06.2019