Javascript 我的子组件如何在Angular 2中调用父组件上的方法？ 背景

假设我有一个父组件，称之为

MatchList

，它提供了一个

Hero

对象的列表。每个

Hero

对象都有一些表中显示的属性。现在假设我还为每个

英雄
设置了一个按钮，用于更新路线、加载新视图并显示更多细节

以前


之后


问题
我的主要问题是：我想从我的
匹配列表
模板中的按钮调用路由器的
navigate（）
方法，但我尝试这样做时收到以下错误：

异常：评估“click”BrowserDomAdapter.logError@…时出错。。。
angular2.dev.js:21835原始异常：TypeError:l_context.setPath不是函数。。。
angular2.dev.js:21835 TypeError:l_context.setPath不是位于

换句话说看起来我无法在子模板中引用父组件的路由器方法

那么，在Angular 2中，子组件访问父组件（或“上下文”）的方法的正确和最佳方式是什么

我更希望解决方案是更干净的

class parent {

     child: Child;

     constructor(...) {

        ...

        this.child.parent = this;

     }
}

示例代码
编辑
我将模板按钮更改为

(^click)="setPath(match.match_id)"

我不再收到错误消息，但什么也没有发生——我甚至没有得到确认单击的控制台日志


到目前为止我所拥有的一些片段

//母公司

    @Component({
        selector: 'dota-app',
        directives: [Home, MatchesView, ROUTER_DIRECTIVES],
        templateUrl: 'AppView.html'
    })
    @RouteConfig([
        { path: '/', component: Home, as: 'Home' },
        { path: '/matches', component: MatchesView, as: 'Matches' },
        { path: '/match-details', component: MatchDetailsView, as: 'MatchDetails'}
    ])
    export class RootDotaComponent {

        router: Router;

        constructor(router: Router) {

            this.router = router;

        }

        public setPath(linkParams: any[]|string): void {

            if (typeof linkParams === "string")
                linkParams = [linkParams];

            this.router.navigate(<any[]>linkParams);

        }

    }

}

//模板

<table class="table">
              ...
    <button (click)="setPath(match.match_id)">Match Detail Route</button>
</table>


...
匹配详细路线
在这个问题的上下文中，即调用父
路由器
，结果证明，答案很简单。有关详细信息，请参阅

主要的收获是给一个子组件一个路由器

class ChildComponent {

    constructor(router: Router) {

        ...

    }

}

不创建新路由器，它只是扩展父组件的现有路由器。因此，不需要引用父对象。只需调用childRouter的方法，一切都会按预期进行。
您能在组件上放置一个事件，并让父组件在收到该事件后更改路由吗？看起来很有希望，但目前为止还没有成功。我将按钮更改为
（^click）=“setPath（match.match\u id）”
，请注意克拉。你还有别的想法吗？不确定我是否掌握了事件的最新速度。您的子组件正在调用setPath（），这是您创建的一个函数，仅存在于父组件上。（错误是它无法找到该函数）您可能需要一个中间人函数将事件从子级传递到父级，因为我认为您无法从子模板调用父级函数。我可能错了…对，我需要一种方法来访问更高级别的上下文。Angular必须有一种开箱即用的方法来实现这一点，对吗？我想
，然后从组件生成selectHero事件，让父级处理它，并使用changeRouteToHero方法更改路由。
class ChildComponent {

    constructor(router: Router) {

        ...

    }

}