javascript - Angular 2 : Call function from parent component

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 。

但是在这个提到的例子中我需要包括

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

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

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

问题:当我添加 <child (notifyParent)="getNotification($event)"></child> 时对于我的父模板，子组件已经包含在父模板中，即使它不是通过 URL 路由调用的。当我删除该部分时，父子之间的交互不再起作用。如果我将它们添加到子模板中，我将陷入永无止境的循环并崩溃。

谁能看到我的问题或知道是什么导致了这个错误？我在网上看到了一些例子，比如上面分享的那个，都使用了类似的解决方案，但它对我不起作用。

提前致谢!

亲切的问候，亚德博

Answer 1

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

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

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

当使用嵌套组件时，可以使用@input 和@output 来实现父子之间的通信。

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