如何从父组件调用路由器出口子组件方法 [英] How to call router outlet child component method from parent comonent

问题描述

我是 angular2 的新手

<路由器插座><路由器插座></父母>

我在父组件中有一个按钮，如果我单击该按钮，它应该调用子组件中的一个方法(加载到路由器插座中.)

有没有办法从父组件调用子组件(在路由器插座中)方法?

解决方案

显示组件的模板基本上有两种方式:作为嵌套组件或作为路由目标.

嵌套组件

如果使用嵌套组件，则组件被认为具有父组件/子组件"关系.

父组件的 Html 将如下所示:

<孩子></孩子>

其中child"是子组件的选择器.然后，您可以使用 @Input 和 @Output 属性在两者之间进行通信.

有关嵌套组件时此技术的更多信息，请查看此处的文档:https://angular.io/guide/component-interaction

路由目标

如果您通过在 中显示一个组件作为路由目标，那么就没有父组件"和子组件"关系.

在这种情况下，组件之间通信的最佳方式是使用服务.

我有一篇关于在这里创建服务的博客文章:https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

资源

如果您是 Angular 的新手，您可以通过学习教程或在线课程为自己节省大量时间和挫折.这将介绍所有基本概念，让您快速上手 Angular.

您可以在此处完成英雄之旅"教程:https://angular.io/tutorial

或者观看这样的课程:https://app.pluralsight.com/library/courses/angular-2-getting-started-update

或者这个:https://app.pluralsight.com/library/courses/angular-2-first-look/table-of-contents

(您可以免费注册一周.)

I am new to angular2

<parent>
    <router-outlet><router-outlet>
</parent>

I have a button in parent component, if I click that button it should call a method in the child component (which is loaded in router outlet.)

Is there any way to call the child component (in router outlet) method from parent ?

解决方案

There are basically two ways to display a component's template: As a nested component or as a routing target.

Nested Component

If you use a nested component, then the components are considered to have a "parent component/child component" relationship.

The Html for the parent component would then look like this:

<div>
   <child></child>
</div>

Where "child" is the selector of the child component. You can then communicate between the two using @Input and @Output properties.

For more information on this technique when you have nested components, check out the docs here: https://angular.io/guide/component-interaction

Routing Target

If you use a component as a routing target by displaying it in a <router-outlet>, then there is no "parent component" and "child component" relationship.

The best way to communicate between components in this case is to use a service.

I have a blog post about creating a service here: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Resources

If you are new to Angular, you may save your self a bunch of time and frustration by working through a tutorial or online course. That will introduce all of the basic concepts to get you on your way with Angular quickly.

You can work through the "Tour of Heroes" tutorial here: https://angular.io/tutorial

Or watch a course such as this one: https://app.pluralsight.com/library/courses/angular-2-getting-started-update

Or this one: https://app.pluralsight.com/library/courses/angular-2-first-look/table-of-contents

(You can sign up for a free week.)

这篇关于如何从父组件调用路由器出口子组件方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！