AngularJS 组件的等价物需要 Angular 组件中的属性

Question

我正在升级一个大型 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”，但不知道如何使用

Answer 1

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

constructor(@Host() private gsForm: GsForm) {
   //here you will have access to parent directive gsForm
}

Answer 2

来自AngularJS Docs：

组件间通信

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

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

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

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