Angular2：从父组件调用函数答案

【问题标题】：Angular2: Call function from parent componentAngular2：从父组件调用函数
【发布时间】：2017-04-14 23:00:05
【问题描述】：

我遇到了一个问题，之前已经提到过，但是像这样的解决方案： What is the proper use of an EventEmitter?

为了方便起见，我想在共享链接上举这个例子：

让我们开始吧：首先，我在 app.module.ts 中有这些路由：

{path: 'dash/:project_id', component: DashProject, children: [
    {path: '', component: null},
    {path: 'task/form', component: TaskForm},
    {path: 'task/:task_id', component: TaskView}

如您所见，DashProject 是我的父母，其他人是孩子。我还在 DashProject 的模板中包含了所需的

<router-outlet></router-outlet>

部分包含子项。

但在这个提到的例子中，我需要包含

<child (notifyParent)="getNotification($event)"></child>

现在我在我的父模板中做了这样的：

<child (notifyParent)="getNotification($event)"></child> <router-outlet></router-outlet>

问题：当我将<child (notifyParent)="getNotification($event)"></child> 添加到我的父模板时，子组件已经包含在父模板中，即使它没有被 URL 路由调用。 当我删除该部分时，父组件之间的交互-child 不再工作了。如果我将它们添加到子模板中，我会得到一个永无止境的循环并崩溃。

任何人都可以看到我的问题或知道导致此错误的原因吗？我在网上看到了一些例子，就像上面分享的一样，都在使用类似的解决方案，但它对我不起作用。

提前致谢！

亲切的问候，亚德博

【问题讨论】：

标签： javascript angular typescript angular2-routing

【解决方案1】：

看起来您可能正在合并两种不同的技术。

当你想路由到一个组件时使用路由。例如，路由到 dash 项目页面或任务表单页面。通常路由的组件没有选择器，也不会在 HTML 中直接引用。相反，它们出现在<router-outlet>。

当您想将一个组件用作另一个组件的子组件时，请使用嵌套组件。例如，在项目页面中显示一组星星而不是评级。嵌套组件必须有一个选择器，并且该选择器在 HTML 中使用（如您的 <child> 示例。）

使用嵌套组件时，可以使用@input 和@output 进行父子之间的通信。

使用路由组件时，您可以通过传递参数（必需、可选或查询参数）、使用共享解析器或在服务中设置属性来在组件之间进行通信。

【讨论】：

【解决方案2】：

感谢@DeborahK 的提示，那是我错过了。

现在我正在使用共享服务来解决这个问题，我正在将回调传递给我从孩子那里调用的共享服务。

这是一个例子，至少是一个想法，它是如何工作的：

export class SharedService {
    private callback:any = null;

    public constructor() {
    }
    public getCallback() {
        return this.callback;
    }

    public setCallback(call) {
        this.callback = call;
    }
}

家长：

this._shared.setCallback(this.test.bind(this));

孩子：

this._shared.getCallback()();

是的，它有效:)

【讨论】：