AngularDart 组件和模型绑定 [英] AngularDart components and model binding

问题描述

是否可以将 AngularDart ngComponent 绑定到模型，然后从组件操作该模型并查看 ngComponent 外部更改之外的更改.例如

Is it possible to bind an AngularDart ngComponent to a model and then manipulate that model from the component and see the changes outside of the changes outside of ngComponent. For example

<myawsomecomponent ng-model="{{name}}"></myawesomecomponent>
<label>{{name}}</label>

myAwesomeComponent 会对模型进行某种魔法(例如将所有字母大写)，并且应该反映在组件之外.

myAwesomeComponent will do some kind of magic (for example capitalise all letters) to the model and that should be reflected outside of the component.

在 AngularDart 中执行此类操作的最佳方法是什么?

What's the best way to do something like this in AngularDart?

推荐答案

好问题！要完成此任务，您需要将 NgModel 指令注入 myAwesomeComponent.然后你就可以通过NgModel.modelValue获取和设置模型.

Great question! To accomplish this task, you would inject the NgModel directive into myAwesomeComponent. Then you'll be able to get and set the model through NgModel.modelValue.

@NgComponent(
  selector: 'myawesomecomponent',
  ...
)
class MyAwesomeComponent {
  NgModel _ngModel;
  MyAwesomeComponent(this._ngModel);

  ...
}

通过向元素添加 ng-model 属性，Angular 创建了一个 NgModel 指令.注入系统将为您提供特定元素的 NgModel.

By adding an ng-model attribute to your element, Angular creates a NgModel directive. The injection system will give you the NgModel for your particular element.

看看其他NgModel指令是怎么写的，比如InputCheckboxDirective

Take a look at how other NgModel directives are written, such as InputCheckboxDirective

这篇关于AngularDart 组件和模型绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！