AngularDart技术问询：批量添加子组件Providers/Directives及ngModel绑定问题

1. 如何一次性为AngularDart的子组件添加Providers（提供者）和Directives（指令）？ #

如果你想避免在每个子组件里重复声明相同的Providers和Directives，最高效的方式是利用AngularDart的NgModule来统一管理共享依赖：

• 第一步：创建一个共享模块，把你想复用的Directives注册到declarations数组，Providers注册到providers数组，同时把Directives添加到exports数组（确保其他模块导入后能使用这些指令）。
• 第二步：在包含子组件的功能模块中导入这个共享模块，该模块下的所有子组件就会自动继承这些Providers和Directives，无需单独声明。

举个实际代码例子：

// shared_module.dart
import 'package:angular/angular.dart';
import 'custom_directive.dart';
import 'shared_service.dart';

@NgModule(
  declarations: [CustomDirective],
  providers: [SharedService],
  exports: [CustomDirective], // 导出指令供其他模块使用
)
class SharedModule {}

然后在子组件所在的模块中导入：

// feature_module.dart
import 'package:angular/angular.dart';
import 'shared_module.dart';
import 'child_component_a.dart';
import 'child_component_b.dart';

@NgModule(
  imports: [SharedModule],
  declarations: [ChildComponentA, ChildComponentB],
)
class FeatureModule {}

这样ChildComponentA和ChildComponentB就能直接使用CustomDirective，并且可以注入SharedService，不用在每个组件的配置里重复写directives或providers。

如果只是单个父组件下的子组件需要共享Providers，也可以直接在父组件的providers数组中声明，这样所有嵌套的子组件都能注入这些服务；但指令的话还是推荐用模块统一管理的方式，更灵活。

2. 关于ngModel绑定报错的问题及后续疑问解答 #

首先，你遇到的报错：

Error: Template parse errors: line 2, column 21 of ChatFormComponent: ParseErrorLevel.FATAL: Can't bind to 'ngModel' since it isn't a known native property or known directive. Please fix typo or add to directives list. [(ngModel)]="message"

原因很明确：ngModel是AngularDart提供的表单指令，并非原生DOM属性，默认情况下组件无法识别它，必须显式声明依赖才能使用。你添加formsDirectives后解决问题，是因为formsDirectives是AngularDart预定义的指令集合，包含了ngModel、NgForm等常用表单指令，把它加入组件的directives数组后，组件就能识别并使用这些指令了。

你可能关心的后续问题： #

Q: 有没有办法不用每个组件都加formsDirectives？

当然有！和上面的思路一致，用NgModule统一导入表单模块即可。在AngularDart的较新版本中，formsDirectives已经被封装到FormsModule里了，你只需要在组件所在的模块中导入FormsModule，整个模块下的所有组件都能直接使用ngModel，无需在每个组件里单独声明：

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'chat_form_component.dart';

@NgModule(
  imports: [FormsModule],
  declarations: [ChatFormComponent],
)
class ChatModule {}

Q: 使用[(ngModel)]还有什么需要注意的？

确保你的组件类里有对应的属性，并且是可访问的（不需要额外的装饰器，普通属性即可）：

@Component(
  selector: 'chat-form',
  template: '''<input type="text" [(ngModel)]="message">''',
)
class ChatFormComponent {
  String message = ''; // 对应模板中的双向绑定属性
}

内容的提问来源于stack exchange，提问作者Augie Li