2

我正在升级一个大型 Angular 1.6 应用程序，我们有许多组件使用“require”来访问父组件的控制器。AngularJS 组件看起来像：

 var tileTextbox = {
        template: '<ignore>',
        controller: TileTextboxController,
        bindings: {
            field: '<',
            notifyError: '&',
            context: '<',
            onRemoteFieldAction: '&',
            onChange: '&'
        },
        require: {
            formsCtrl: '^gsForm' ----> What should this be replaced with in Angular component?
        }
    };

我找到了@ViewChild，它让父母可以访问孩子，但我正在寻找其他方式。我知道我们可以重构使用某种共享服务，但此时我只是在寻找最小的重构。从 Angular 的文档 @ https://angular.io/guide/upgrade 看来，您的组件确实可以使用“require”，但不知道如何使用

4

2 回答 2

1

require等效的角度是Host。您可以使用Host装饰器来获取父组件实例。同样，您必须在子组件构造函数中提及父组件/指令/服务名称。

constructor(@Host() private gsForm: GsForm) {
   //here you will have access to parent directive gsForm
}
于 2018-11-30T10:18:50.650 回答
0

来自AngularJS 文档：

组件间通信

指令可以要求其他指令的控制器启用彼此之间的通信。这可以通过为require属性提供对象映射在组件中实现。对象键指定所需的控制器（对象值）将绑定到所需组件的控制器的属性名称。

本质上，这是在两个组件之间共享数据所必需的。在 Angular 中有多种方法可以做到这一点。

  1. 您可以创建一个 SharedService 并将其注入到两个 Angular 组件中。从一个组件设置数据并从另一个组件检索数据。
  2. 您可以使用@Input属性将数据从父级传递给子级。
  3. 您可以使用@Output属性将数据从子级传递给父级。

还有许多其他方法可以在父组件和子组件之间共享数据。ViewChild等等例如。但以上三种是最直接的方式。

于 2018-11-30T10:18:34.390 回答