单击输入按钮时显示 div

Question

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

例如 ：

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

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

这是我的div-component ：

export class divComponent implements OnInit , AfterViewInit {

  @Input() focus: ElementRef;
}

我怎样才能解决这个问题？

Answer 1

尝试：

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

和：

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

工作堆栈闪电战： https ://stackblitz.com/edit/angular-s2p2je

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