ViewChild 通过 ID 显示隐藏表单答案

【问题标题】：ViewChild show hide form with Id passingViewChild 通过 ID 显示隐藏表单
【发布时间】：2020-08-09 11:14:09
【问题描述】：

我有一个包含多个标签的父页面，如下图所示。

现在我想在父页面中显示表单页面子页面上面位置标签的示例是父页面，我该怎么做，这是一个格式下面是我的表单页面。

现在如果我可以取消 它应该隐藏我的表单并显示列表 当然我可以使用*ngIf 但如何在此位置选项卡中显示表单页面并隐藏位置列表和取消点击后隐藏表单并显示列表我也想传递 Id。

我还在 app-routing-module.ts 中使用export const appRoutingModule = RouterModule.forRoot(routes, { useHash: true });。

【问题讨论】：

你能用一些编辑器分享你的代码吗？因为这无法清楚地解释。
@MinalShah 因为显示代码有点复杂.. 但实际上我需要的是，当我单击时，我想在位置列表的位置显示一个 viewchild 页面在该视图子页面中取消它应该恢复到位置列表父页面。我还想在 viewchild 页面中传递 ID 以获取数据填充表单。
@MinalShah 现在我只想通过按钮单击传递 ID 并在位置列表的位置显示我的表单页面。
是的，我明白了这个问题，我已经回答了下面的解决方案，请检查一次。
@MinalShah 我会尝试更新你。

【解决方案1】：

您可以使用NgbModal 服务。

接下来，在ParentComponent 中导入 modalService：

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

将服务添加到构造函数。

export class ParentComponent implements OnInit {
     ...
     constructor(private modalService: NgbModal)
     ...
}

最后，在按钮单击处理程序中，您可以调用open() 方法。

buttonClicked() {
     ...
     let modalRef;
     modalRef = this.modalService.open(ChildComponent);
     ...
}

【讨论】：

在ChildComponent 中创建一个名为id 的属性，如下所示：@Input() id: any。在ParentComponent 中执行此操作：modalRef.componentInstance.id = id 在您打开模式后立即执行。
是的，我做到了，它的工作谢谢你，但我仍然不能在表单中使用取消来返回父列表页面.. ?
您可以在ChildComponent 的构造函数中使用NgbActiveModal，如下所示：constructor(private modalService: NgbModal, public activeModal: NgbActiveModal)。记得导入ChildComponent:import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'。然后，您只需调用activeModal.close('message') 方法。要阅读 ParentComponent 中的消息，请在调用 open() 方法后执行以下操作：modalRef.result.then((result) => { // do something })。
其实我没有一个模态它的一个 div 显示隐藏我只是想隐藏我的 div 上面有一个 ID 并在取消后显示列表。
我使用了输出事件发射器，它适用于取消按钮。

【解决方案2】：

好吧，在这种情况下，

您应该定义另一个组件，包含表单的输入。

假设该组件的选择器是。在用于列出位置的组件中。将所有 html 代码保存在一个 div 中，并将其与条件 *ngIf 绑定，以检查是否显示该 div。

<div *ngIf="!selectedId">......</div>

在同一个组件中写入：

<app-location-form [id]="selectedId" (onCancle)="selectedId=undefined"></app-location-form>

在此表单组件中，获取输入以获取选定的 id 并发出事件以关闭表单并再次显示列表。当您单击编辑按钮时，只需将变量 selectedId 设置为行的 id。

【讨论】：