AngularDart：无法转换为 material 组件

Question

我有一个 dart 应用程序，其中包含一个带有 material-checkbox 的模板，我无法在我的组件中使用它。这是一个演示问题的简单模板 (two_boxes.html)：

<!--
Simple HTML to test checkboxes
-->

<input type="checkbox" id="cb0">
<label>Standard Checkbox</label>

<material-checkbox label="Material Checkbox" id="cb1">
</material-checkbox>

<button (click)="doTest()">Test</button>

以及我尝试在其中使用复选框的相应组件 (two_boxes.dart)。我可以按预期在转换中使用标准复选框，但找不到对 material 复选框执行相同操作的方法：

// Component for testing

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

import 'dart:html';

@Component(
    selector: 'two-boxes',
    templateUrl: 'two_boxes.html',
    directives: const [MaterialCheckboxComponent],
    pipes: const [
      COMMON_PIPES
    ])
class TwoBoxes {

  // Get the the two checkboxes and see if they are checked
  void doTest() {
    var checkbox_standard = querySelector("#cb0");
    print(checkbox_standard.runtimeType.toString()); // InputElement
    print((checkbox_standard as CheckboxInputElement).checked); // Succeeds

    var checkbox_material = querySelector("#cb1");
    print(checkbox_material.runtimeType.toString()); // HtmlElement
    print((checkbox_material as MaterialCheckboxComponent).checked); // Error!
  }
}

当我运行 Dartium 中的应用程序遵循 "pub serve"（无错误）时，最后一条语句失败：

VM54:1 EXCEPTION: type 'HtmlElementImpl' is not a subtype of type
MaterialCheckboxComponent' in type cast where HtmlElementImpl is 
from dart:html MaterialCheckboxComponent is from   
package:angular_components/src/components/
material_checkbox/material_checkbox.dart

显然这种投射方式是行不通的。我搜索了几个小时如何解决这个错误并找到了正确的方法，但显然是在错误的地方。我在这里错过了什么？我正在使用 Dart VM 版本 1.24.2。

Answer 1

无法从以这种方式查询的元素中获取组件实例。

您可以使用@ViewChild()

class TwoBoxes implements AfterViewInit {

  @ViewChild(MaterialCheckboxComponent) MaterialCheckboxComponent cb;

  ngAfterViewInit() {
    print(cb.checked);
  }

如果你有多个，要得到一个特定的，你可以使用模板变量

<material-checkbox #foo label="Material Checkbox">

和

@ViewChild('foo') MaterialCheckboxComponent cb;

您可以在此 TypeScript 答案中找到有关此主题的更多信息

语法有点不同（右侧的类型注释和 {} 围绕可选的 read 参数，在 Dart 中没有使用。

AngularDart：无法转换为 material 组件

AngularDart: cannot cast to a material component

dart

angular-dart

angular-material