将 DartAngular 与 dart:html 一起使用

Question

是否可以将默认的 dart 库 html 与 angular dart 一起使用？即：

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

如何避免在不使用任何计时器的情况下获得 'null' 按钮？

基本上我只对路线使用 angular，但我想坚持使用 dart:html 来控制 DOM 和事件。

Answer 1

是的，你可以这样做，但这通常不是一个好主意。

改为使用 @ViewChild(...) 或类似的 Angular 方法来获取对组件视图中元素的引用。

<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 而不是 angular 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"));
  }
}

将 DartAngular 与 dart:html 一起使用

Use DartAngular with dart:html

dart

dart-html

angular-dart