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

Posted

技术标签:

【中文标题】Angular 2 从另一个组件访问组件【英文标题】:Angular 2 access component from another component 【发布时间】: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');,它正在访问 &lt;ck-keypad&gt; 组件

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

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

谢谢

【问题讨论】:

【参考方案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,用模态组件做了示例

【讨论】:

以上是关于Angular 2 从另一个组件访问组件的主要内容,如果未能解决你的问题,请参考以下文章

如何从另一个组件调用一个函数,同时保持另一个组件在 Angular 中的通用性?

无法从另一个组件/ Angular 4中的auth.service访问错误消息

Angular 4在不使用服务的情况下从另一个组件执行功能

Angular2 - 从另一个独立组件调用函数。基本上,从外部组件调用函数

Angular 6 - 从另一个组件调用模态窗口组件

如何从另一个组件重新渲染特定组件模板?角 2