如果尚未调用子组件,如何从父组件调用子组件方法?
Posted
技术标签:
【中文标题】如果尚未调用子组件,如何从父组件调用子组件方法?【英文标题】:How to call a child component menthod from parent if the child component is not being called yet? 【发布时间】:2020-06-27 13:35:42 【问题描述】:我有一个父组件和一个子组件来使用 popum 组件添加和更新磁贴,现在添加按钮恰好在父组件中,而更新在子组件中。 当没有要显示的图块(子组件标记)时,我必须添加一个图块,那时我无法调用子组件的方法 openAddOrUpdatePopup()。
如何在不依赖子组件的情况下在父组件中调用此方法?
我的代码:- 父级html
<input type="button" class="btn" value="Add" (click)="applicationTile.openAddOrUpdatePopup()" />
<application-tile class="grid-item action-grid-item enable-events" *ngFor="let application of paginationParams.data" [ngClass]="'active':activeApplication && activeApplication.applicationId == application.applicationId" [application]="application"></application-tile>
父.ts
export class ApplicationsComponent implements OnInit
@ViewChild (ApplicationTileComponent, static: false) applicationTile: ApplicationTileComponent ;
Child.html
<label class="name">application.applicationName</label>
<div class="table-view">
<div class="table-view-row">
<div>
<label>Application value </label>
<span>application.value ? application.value : '-'</span>
</div>
<label>Application Version</label>
<span>application.appVersion ? application.appVersion : '-'</span>
</div>
<ul class="actions">
<li>
<span class="icon svg-icon action-icon edit-icon" title="Edit"
(click)="openAddOrUpdatePopup(application, $event)"></span>
</li>
</ul>
</div>
<av-popup class="medium-popup" *ngIf="popupParams && popupParams.name == 'create-or-update-application'" [popupParams]="popupParams" (close)="popupParams = null">
<form name="form" (ngSubmit)="f.form.valid && popupParams.saveOrUpdateApplication()" #f="ngForm"></form></av-popup>
child.ts
openAddOrUpdatePopup(application?, $event?)
if (application)
application = JSON.parse(JSON.stringify(application));
else
application =
applicationType: this.applicationTypes[0].applicationTypeVal
this.popupParams =
name: 'create-or-update-application',
title: application.applicationId ? 'Edit ' + application.applicationName : "Create New Application",
application: application
【问题讨论】:
【参考方案1】:你能详细说明一下这个问题吗?或者您可以在 Stackblitz 中发布工作代码并提供链接吗?
通过使用连接父子组件的方法很少,
输入和输出。
与观察者共享服务(发布和订阅)
【讨论】:
stackblitz.com/edit/… 请检查链接,问题是即使未设置应用程序变量,我也想单击添加按钮功能,因为目的是创建带有添加按钮的图块,但该功能在子图块组件 我了解您的要求.. 我在办公室.. 让我过一段时间再处理它。谢谢..以上是关于如果尚未调用子组件,如何从父组件调用子组件方法?的主要内容,如果未能解决你的问题,请参考以下文章