0

我有一个 AngularJS (1.7) 应用程序，它正在使用 ngUpgrade 迁移到 Angular 7。因此 AngularJS 和 Angular 框架同时运行，新组件是用 Angular 编写的，有时这些现代 Angular 组件会在遗留 AngularJS 组件中使用。

就我而言，父组件在某些情况下需要与子组件进行通信。

ngUpgrade文档清楚地展示了如何从 Angular 子组件向父 AngularJS 组件传递数据和传播事件：

<legacy-angularjs-component>
    <div>{{ $legacyCtrl.whatever }}</div>
    <modern-angular-child-component
         [data]="$ctrl.initialDataForChildComponent"
         (changed)="$ctrl.onChildComponentChanged($event)"
    >
    </modern-angular-child-component>
</legacy-angularjs-component>

为了实现这一点，您只需向 Angular 子组件添加几个属性：@Input() data;用于初始数据，@Output() changed = new EventEmitter<WhateverThing>();然后可以通过执行this.changed.emit(this.whateverThing).

这一切都有效，但是将事件从父母传播到孩子呢？我知道如何在 Angular 中做到这一点，例如使用@ViewChild或使用 observables，但这些机制在我的应用程序的 AngularJS 环境中不可用。所以父组件不能使用它们。

我尝试过的两种可行的方法是：

  1. 创建两个组件共享的单独服务。

  2. 将父控制器的引用传递给子控制器，如下所示：

<legacy-angularjs-component>
    <div>{{ $legacyCtrl.whatever }}</div>
    <modern-angular-child-component
        [observe]="$ctrl.registerObserver",
    >
    </modern-angular-child-component>
</legacy-angularjs-component>

...然后让子组件调用此observe函数：

  ngOnInit() {

    if (this.observe) {
      // Pass reference to child component to the
      // parent, so parent can directly send it messages.
      this.observe(this);
    }
  }

这样，一旦设置了组件，父级就可以直接引用子级。子进程实现了一些 TypeScript 接口，该接口定义了父进程可以调用以通知子进程事件的所有子进程方法。

这两种方法都有效，但它们都让我觉得很笨拙，而且对于像向子组件发送事件这样简单的事情要做很多繁琐的事情。

由于这在 AngularJS 和 Angular 中都很容易做到，我想知道我是否可能会错过在 的上下文中做同样事情的更简单/更简单的方法ngUpgrade，其中父级是 AngularJS，子级是 Angular 7。

还是我的第二种方法是一种合理的方法？

4

1 回答 1

1

好吧，正如 Eazy-E 曾经说过的那样，“问，你会在公开发布问题后立即想到一个更简单的答案。”

比我上面提到的前两个更好的解决方案是简单地使用常规的 Angular 单向绑定并使用OnChangesAngular 提供的机制。

<legacy-angularjs-component>
    <div>{{ $legacyCtrl.whatever }}</div>
    <modern-angular-child-component
         [observed]="$ctrl.valueThatChildIsObserving"
    >
    </modern-angular-child-component>
</legacy-angularjs-component>

然后，在子组件中：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

export class MyChildCompoennt implements OnChanges {

  @Input() observed: SomeWhateverObject;

  ngOnChanges(changes: SimpleChanges) {

    console.log(changes);
    // Inspect changes (it contains old and new values
    // for `observed` object. That object could be a string
    // or something more complicated with multiple properties.\
  }

}

这样，当父组件想要告诉子组件做某事时，它就可以做this.valueThatChildIsObserving = someWhatever;.

Angular 将处理调用子组件ngOnChanges()，并传递给它一个包含属性的新旧值的结构。

您必须实现子组件，以便它可以检查更改的值并执行正确的操作，但这非常简单，并且避免了必须让父/子共享相互引用。

我认为这是在混合 AngularJS/Angular 应用程序中使用ngUpgrade.

于 2019-03-15T08:16:56.083 回答