Angular2：从父组件调用函数

Question

我遇到了一个之前提到过的问题，但是像这样的解决方案是： 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路由未调用它也是如此。 当我删除零件时，父子之间的交互不再起作用。 如果将它们添加到子模板中，则会出现永无休止的循环并崩溃。

谁能看到我的问题或知道是什么原因导致此错误？ 我在网上看到了一些示例，例如上面共享的示例，并且所有示例都使用了类似的解决方案，但它对我不起作用。

提前致谢！

亲切的问候，Yadbo

Answer 1

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

要路由到组件时，请使用路由。 例如，路由到破折号项目页面或任务表单页面。 通常路由的组件没有选择器，并且不会在HTML中直接引用。 相反，它们出现在<router-outlet> 。

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

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

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

Answer 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()();

是的，它有效:)