ngIf语法有个问题，使用这个指令隐藏的元素会在DOM中被删除，当显示的时候需要重新加载这个组件。
但是有些情况我只是暂时隐藏一下这个元素，希望它显示的时候保留住隐藏前的状态。
比如一个输入框，我输入了一些文字，这时候我使用ngIf把它隐藏起来，当我恢复它的时候，发现原来输入的文字不见了。这就十分郁闷了。
为了解决这样的问题，我们自己写一个指令吧。
我的思路是使用CSS语法：
display:none
来隐藏元素，这样就能保留住元素原来的状态了。
使用
第一反应是使用Renderer2的setStyle()和removeStyle()来实现隐藏和显示的功能，
不过这种方式似乎会对元素原本的样式产生一些无法预料的影响。
还是觉得addClass()和removeClass()稍微安全点。
不过这样的问题就是必须在最顶层的style.css文件中添加一个class配合使用才能达到效果。
首先我们在最顶层的style.css文件中加一个新的class以供操作：
.hide{
display:none!important;
}
这里要加!important 否则如果元素原本的样式中设置了display属性，这个类就不起作用了。
然后是
新建一个指令：
import { Directive,Input,Renderer2,ElementRef,AfterViewInit} from "@angular/core";
@Directive({
selector:'[zmShow]'
})
export class ZmShowDirective{
constructor(private elementRef:ElementRef,private render:Renderer2) {
}
private showing:boolean = true;
@Input() set zmShow(condition:boolean){
if(condition&&!this.showing){
this.render.removeClass(this.elementRef.nativeElement,"hide");
this.showing=true;
}else if(!condition&&this.showing){
this.render.addClass(this.elementRef.nativeElement,"hide");
this.showing=false;
}
}
}
在app.module中引入我们的新指令，就可以使用了。
<div style="display:block;" [zmHide]="showDiv"><input nz-input></div>
这样你改变showDiv的值，就可以隐藏/显示这个div元素了。
而且恢复元素的时候，你输入框中的输入的内容依然存在。
