如何在 ionViewWillEnter() 上更改 angular 8 中复选框的值

Question

因为我使用的是 ion-router，所以我的输入字段即复选框似乎保留了它的值，因为当我在同一层次结构中导航时该组件没有被破坏。每当调用 ngOnDestroy() 并返回到视图时，它都会按要求工作，即复选框值设置为默认值。所以我需要一些方法，我可以从输入字段中获取值并将其更改为默认值，即 ionViewWillEnter() 中的 false，以防我处于相同的导航层次结构中。

这是我的 HTML 代码：

<div class="d-flex justify-content-between border-bottom p-2">
 <label translate="Test"></label>
 <input class="align-middle" type="checkbox"/>
</div>

Answer 1

您的输入似乎没有使用任何 Angular/Ionic 功能。

我希望看到的是正在设置的 [ngModel] 或 value。

你可以这样做：

// 标记

<div class="d-flex justify-content-between border-bottom p-2">
 <label translate="Test"></label>
 <input class="align-middle" type="checkbox" [ngModel]="yourInputNameHere" />
</div>

那么如果你在后端有一个变量：

let yourInputNameHere: boolean = false;

并且可用于设置 ionViewWillEnter() 中的值。

Answer 2

我解决这个问题的方法是使用来自 angular.

的 @ViewChild() 组件

HTML代码：

<div class="d-flex justify-content-between border-bottom p-2">
 <label translate="Test"></label>
 <input class="align-middle" type="checkbox" #checkBox1 />
</div>

组件代码：

@ViewChild("checkBox1", { static: false }) checkBox1: ElementRef;

public ionViewWillEnter() {
 this.checkBox1.nativeElement.checked = false;
}

所以每次视图进入时使用ViewChild()我们可以将元素的checked值设置为false。

如何在 ionViewWillEnter() 上更改 angular 8 中复选框的值

How can I change value of checkbox in angular 8 on ionViewWillEnter()

html

forms

checkbox

angular

ionic4