Angular dart - 使用 ngModel 的自定义输入组件

Question

我正在尝试创建一个自定义输入文本组件，但我不知道如何让它与 ngModel 指令一起工作。

我试过复制 material angular_component input 但无法理解 inputText 属性实际上是如何链接到 ngModel 值的以及目的是什么DefaultValueAccessor 指令。

这就是我希望如何使用我的组件：

<my-input-component [(ngModel)]="someProp"><my-input-component>

（其中 my-input-component 的内容只是带有标签的普通 <input type="text"> 字段）

任何想法或指向 examples/docs 的链接将不胜感激。

Answer 1

调试angular_components代码后，我自己找到了答案。您必须实施 ControlValueAccessor 并注册 ngValueAccessor 提供商（这实际上是缺失的部分）。

这是我的解决方案：

// my_custom_component.dart
@Component(
  selector: 'my-custom-component',
  templateUrl: '<div class="input-wrapper">{{value}}</div>',
  providers: [
    ExistingProvider.forToken(ngValueAccessor, MyCustomComponent),
  ],
)
class MyCustomComponent implements ControlValueAccessor<String> {
  String value;
  // ...could define a setter that call `_changeController.add(value)`

  final _changeController = StreamController<String>();

  @Output()
  Stream<String> get onChange => _changeController.stream;

  @override
  void writeValue(String newVal) {
    value = newVal ?? '';
  }

  @override
  void registerOnChange(callback) {
    onChange.listen((value) => callback(value));
  }

  // optionally you can implement the rest interface methods
  @override
  void registerOnTouched(TouchFunction callback) {}

  @override
  void onDisabledChanged(bool state) {}
}

// app_component.dart
@Component(
  selector: 'app-component',
  templateUrl: '''
    <my-custom-component [(ngModel)]="data"></my-custom-component>
  ''',
  directives: [
    NgModel,
    MyCustomComponent,
  ],
)
class AppComponent {
  String data;
}

注意：angular_component使用指令，但主要思想是相同的。

Angular dart - 使用 ngModel 的自定义输入组件

Angular dart - custom input component with ngModel

angular-dart

angular