угловой дротик querySelector не находит элемент в модальном - PullRequest
Новая
       21

угловой дротик querySelector не находит элемент в модальном

0 голосов
/ 17 июня 2019

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

<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);
  }
}

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

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

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» на консоль.

...