Angular4重新触发一个ViewChild再次渲染后订阅
问题描述:
我在下面的代码我component
:Angular4重新触发一个ViewChild再次渲染后订阅
@ViewChild('form') form: NgForm
isFormShown = true
ngAfterViewInit(): void {
this.form.valueChanges
.subscribe(() => {
console.log("form has changed")
})
}
,并在我的模板:
<button type="button" (click)="isFormShown = !isFormShown">CLICK</button>
<form #form="ngForm" *ngIf="isFormShown">
...
</form>
,如果我在我的按钮点击两次,(所以我的表单会消失并重新出现)。它似乎并不像我的订阅仍然存在。事实上,我正在摆弄我的表单输入,而且我没有记录任何东西。 我需要做些什么才能使其重新工作?
答
那是因为*ngIf="isFormShown"
,如果false
ngIf
simlpy删除的组件,如果再添加它的true
你应该使用:
[hidden]="!isFormShown"
仅供展示隐藏目的始终使用隐藏
答
如果它的好有现有值停留在形式大于你可以简单地隐藏它,而不是使用ngIf
:
<button type="button" (click)="isFormShown = !isFormShown">CLICK</button>
<form #form="ngForm" [hidden]="!isFormShown">
...
</form>
但是,如果你想清除所有现有值,比你需要退订以及查看表单的切换再次订阅象下面这样:
HTML:
<button type="button" (click)="toggleForm()">CLICK</button>
<form #form="ngForm" *ngIf="isFormShown">
...
</form>
TS:
@ViewChild('form') form: NgForm;
public isFormShown: boolean = true;
private formChangeSubscriber: any;
ngAfterViewInit(): void {
this.formChangeSubscriber = this.form.valueChanges
.subscribe(() => {
console.log("form has changed")
})
}
toggleForm(): void {
this.formChangeSubscriber.unsubscribe();
this.isFormShown = !this.isFormShown;
if(this.isFormShown) {
setTimeout(() => {
// wait for a tick so angular can render the changes
this.formChangeSubscriber = this.form.valueChanges
.subscribe(() => {
console.log("form has changed");
});
}, 0);
}
}
您还可以查看上面的代码plnkr demo。
您的第一次订阅是有效的,因为窗体是可见的。但是,当您单击该按钮时,它会消失。您应该创建一个方法,您可以调用(单击)事件并将订阅逻辑放在那里。 –
您是否还想在表单值重新出现时清除表单值?还是可以在用户点击btn隐藏表单之前填入值? – Dhyey