Используйте DartAngular с dart:html

Question

Можно ли использовать библиотеку дартс по умолчанию html с угловым дротиком? то есть:

class Test1Component implements OnInit{
  @override
  void ngOnInit() {
    ButtonElement button = querySelector('button');
    //Broken code, avoid button to be null.
    button.onClick.listen(onClick);
  }

  void onClick(Event e){
    print('Button clicked');
  }
}

Как я могу избежать "нулевой" кнопки без использования таймеров?

В основном я использую только угловой только для маршрутов, но я хотел бы придерживаться dart:html контролировать DOM и события.

Answer 1

Да, вы можете сделать это, но обычно это не очень хорошая идея.

Используйте вместо @ViewChild(...) или аналогичные угловые методы для получения ссылок на элементы в представлении компонентов.

<button #myButton>click me</button>

@ViewChildren('myButton')
set myButton(List<Element> value) {
  if(value.isNotEmpty) {
    print(value.first);
  }
}

Если вы хотите просто добавить обработчик кликов, используя

<button (click)="onClick">click me</button>

было бы лучше, но кажется, что вы как-то динамически добавляете кнопку, а декларативное добавление обработчика щелчков может не сработать в этом случае (потребуется больше информации)

Answer 2

РЕДАКТИРОВАТЬ: Если кто-то, как я хочу использовать dart:html вместо углового кода ng, можно использовать его

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

// AngularDart info: https://webdev.dartlang.org/angular
// Components info: https://webdev.dartlang.org/components

@Component(
  selector: 'container',
  template: '<h1>Test 1</h1><button #test1>Bottone test 1</button>',
)
class Test1Component implements OnInit{

  @ViewChild('test1')
  ButtonElement button;


  @override
  void ngOnInit() {
    //Verified that button is initialized
    print(button);
    //Initialize click
    button.onClick.listen((e) => print("Clicked"));
  }
}