单击输入按钮时显示 div

【问题标题】：show a div when click an input button单击输入按钮时显示 div
【发布时间】：2020-03-03 20:35:47
【问题描述】：

当我点击另一个组件中的输入按钮时，我想在一个组件中显示一个 div。

例如：

在添加组件中，我有一个输入：<input #openDiv>，当我单击或聚焦它以显示此组件时，我需要：

<div-component [focus]="openDiv"></div-component>

这是我的div-component：

export class divComponent implements OnInit , AfterViewInit {

  @Input() focus: ElementRef;
}

我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

试试：

<div-component *ngIf="showDiv"></div-component>

和：

<input #openDiv (focus)="showDiv = true" (click)="showDiv = true" />

注意，您也可以使用(focusout)="showDiv = false" 在失去焦点时隐藏 div。 *ngIf 进一步从 DOM 中删除了该元素。如果您想将元素保留在 DOM 中，请使用 [hidden]="!showDiv"。

【讨论】：