Question

我遇到过一段时间以前提到的问题，但是这些解决方案是这样的： 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路由调用。当我删除部分，亲子之间的互动不再起作用。如果我将这些添加到子模板中，我会得到一个永无止境的循环并崩溃。

任何人都可以看到我的问题或知道导致此错误的原因是什么？我在网上看到了一些例子，比如上面的共享例子，所有人都使用了类似的解决方案，但它不适合我。

提前致谢！

亲切的问候，yadbo

Answer 1

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

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

中

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

使用嵌套组件时，可以使用@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()();

是的，它有效：）

Angular2：来自父组件

2 个答案: