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>

，如果我在我的按钮点击两次，（所以我的表单会消失并重新出现）。它似乎并不像我的订阅仍然存在。事实上，我正在摆弄我的表单输入，而且我没有记录任何东西。我需要做些什么才能使其重新工作？

来源

2017-10-16 Scipion

您的第一次订阅是有效的，因为窗体是可见的。但是，当您单击该按钮时，它会消失。您应该创建一个方法，您可以调用（单击）事件并将订阅逻辑放在那里。 –

您是否还想在表单值重新出现时清除表单值？还是可以在用户点击btn隐藏表单之前填入值？ – Dhyey

那是因为*ngIf="isFormShown"，如果false

ngIf simlpy删除的组件，如果再添加它的true

你应该使用：

[hidden]="!isFormShown"

仅供展示隐藏目的始终使用隐藏

来源

2017-10-16 06:47:45

如果它的好有现有值停留在形式大于你可以简单地隐藏它，而不是使用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。

来源

2017-10-16 07:02:37 Dhyey

Angular4重新触发一个ViewChild再次渲染后订阅

回答

相关问题