Question

我正在升级大型Angular 1.6 App，我们有许多使用'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，它可以使父级访问Child，但我正在寻找其他方法。我知道我们可以重构某种共享服务的使用，但是目前我只是在寻找最小的重构。来自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中有多种实现方法。

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

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

等效于Angular组件中的AngularJS组件require属性

2 个答案: