Question

我对Angular2 +（不是AngularJs）有疑问。我是Vue.js程序员，我很好奇Angular是否有可能。

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

这是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”] ）知道哪个孩子是正确的），然后更新模块状态。 / p>

在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

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

1 个答案: