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');
,它正在访问 <ck-keypad>
组件
现在由于 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访问错误消息