Angular 2 从另一个组件访问组件答案

【问题标题】：Angular 2 access component from another componentAngular 2 从另一个组件访问组件
【发布时间】：2016-09-28 20:02:18
【问题描述】：

我有一个页面，上面有两个组件：

Page({
    template: '<ion-navbar *navbar class="contact_navbar">
                    <ion-title>Loan Calculator</ion-title>
                </ion-navbar>
                <ion-content><ck-auto-loan-calculator type="normal"></ck-auto-loan-calculator></ion-content><ck-keypad id="keypad"></ck-keypad>',
    directives: [[ckAutoLoanCalculator], [Keypad]]
})
export class LoanCalculator {}

现在在 ck-auto-loan-calculator 里面我有一个按钮：(click)="showKeypad()"

showKeypad() 函数曾经有 let k = this.app.getComponent('keypad');，它正在访问 <ck-keypad> 组件

现在由于 ionic 更改为 beta 7 并且 angular 更改为 RC，我收到以下错误：原始异常：TypeError：无法读取未定义的属性“setControl”

如何使键盘组件在 Ck-auto-loan-calculator 组件中可访问？

谢谢

【问题讨论】：

标签： ionic-framework angular components ionic2 viewchild

【解决方案1】：

Ionic 2 getComponent 已被弃用，您可以将组件作为输入传递给另一个组件。

您可以使用以下语法从模板中传递它：

<ck-auto-loan-calculator type="normal" [keypad]="keypad"></ck-auto-loan-calculator>
<ck-keypad #keypad></ck-keypad>

然后在ckAutoLoanCalculator

  @Input() keypad: Keypad

ckAutoLoanCalculator 中的任何地方

  this.keypad.open() // assumes there's a public method on keypad component called open

Plunker for passing components as inputs，用模态组件做了示例

【讨论】：