Angular2+ - 如何动态选择子组件并调用其函数？

Question

我有一个关于 Angular2 +(不是 AngularJs)的问题。我是一名 Vue.js 程序员，我很好奇 Angular 是否可行。

假设您有一个包含许多模块的应用程序，这些模块执行许多任务。您有一个负责监视模块状态的前端应用程序；显示日志、错误、通知用户某些模块已完成工作等。模块通过 WebSocket(或 STOMP)与前端通信。如果前端接收到消息，则必须对其进行处理，并且必须更新模块的相应状态(例如标题)。因此，如果 Angular 收到消息，他必须动态选择子组件并更新其状态(调用 children 方法)。

这是它在 Vue.js 中的样子:

父组件的内容:

<module ref="moduleA" ></module>
<module ref="moduleB" ></module>
<module ref="moduleC" ></module>

父级负责处理 WebSocket(或 STOMP)通信。在新消息上，他执行以下代码:

const message = JSON.parse(messageFromBackend);
const moduleName = message["module"]; // message["module"] is for example 'moduleB'
this.$refs[moduleName].updateTitle(message["title"]);

因此，当 Parent 收到消息时，他会动态选择合适的子节点(他从后端知道哪个是正确的 (message ["module"]))，然后更新模块状态。

在 Angular 中可以吗？

Answer 1

您可以轻松地从父组件访问子组件。只需使用 ViewChild 属性。子组件类:

export class ChildComponent implements AfterViewInit {
    myAction();
}

在父组件的模板中:

<child-component #child1 ></child-component>
<child-component #child2 ></child-component>
<child-component #child3 ></child-component>

在父组件类中:

export class AppComponent implements AfterViewInit {
    @ViewChild(ChildComponent) child1: ChildComponent;
    @ViewChild(ChildComponent) child2: ChildComponent;
    @ViewChild(ChildComponent) child3: ChildComponent;

    executeOnChildren() {
        this.child1.myAction();
        this.child2.myAction();
        this.child3.myAction();
    }
}

或者根据您的需要，您可以使用 @ViewChildren 属性:

export class AppComponent implements AfterViewInit {
    @ViewChildren(ChildComponent) children: QueryList<ChildComponent>;

    executeOnChildren() {
        for(const child of this.children) {
            child.myAction();
        }
    }
}

https://angular.io/api/core/ViewChild https://angular.io/api/core/ViewChildren