Question

问题1：

当我回到已经实例化的页面时，我注意到ngOnInit（）方法和构造函数没有被调用。我必须使用其他方法吗？我需要一种在他访问特定页面时每次都会调用的方法。

问题2：

从首页返回登录页面时，登录表单字段数据无法清除

有人可以帮我解决什么问题吗？

login.ts

export class LoginPage {

    loginForm: FormGroup;

    constructor(private navCtrl: NavController) {
        this.loginForm = new FormGroup({
            username: new FormControl('', [Validators.required]),
            password: new FormControl('', [Validators.required]),
        });
    }

    login(): void {
        this.navCtrl.navigateForward('/menu');
    }
}

login.html

<ion-content>
  <div class="login-container">
    <div class="container-fluid p-0">
      <div class="row justify-content-center no-gutters">
        <div class="col-lg-4 col-sm-12 col-md-6">
          <ion-card class="login-fancy">

            <form [formGroup]="loginForm">

              <ion-item>
                <ion-label class="no-padding" position="floating">Username</ion-label>
                <ion-input type="text" formControlName="username"
                  class="form-controll" required></ion-input>
              </ion-item>
              <div class="error-message-div"
                *ngIf="loginForm.get('username').hasError('required') && loginForm.get('username').touched">
                <div class="error"
                  *ngIf="loginForm.get('username').hasError('required') && loginForm.get('username').touched">
                  Username is required
                </div>
              </div>

              <ion-item>
                <ion-label class="no-padding" position="floating">Password</ion-label>
                <ion-input type="text" formControlName="password"
                  class="form-controll" required></ion-input>
              </ion-item>
              <div class="error-message-div"
                *ngIf="loginForm.get('password').hasError('required') && loginForm.get('password').touched">
                <div class="error"
                  *ngIf="loginForm.get('password').hasError('required') && loginForm.get('password').touched">
                  Password is required
                </div>
              </div>

              <div class="mt-4">
                <button type="submit" class="btn btn-primary btn-block" [disabled]="loginForm.invalid"
                  (click)="login()">Login</button>
              </div>

              <div class="row d-flex justify-content-center mt-3 mb-0">
                <label><a href="#" class="">Set Password?</a></label>
              </div>
            </form>

          </ion-card>

        </div>
      </div>
    </div>
  </div>
</ion-content>

Answer 1

您可以调用ionViewDidLoad()方法，该方法每次页面加载时都会调用因此，除了使用constructor之外，您还可以这样做

.
.

    ionViewDidLoad(){
    this.loginForm = new FormGroup({
                username: new FormControl('', [Validators.required]),
                password: new FormControl('', [Validators.required]),
            });
    }
.
.

Answer 2

问题1：

如果第二页是子组件（我想是），则可以在该子组件内声明具有所有必要行为的公共方法。然后在父组件中使用ViewChild装饰器。这样，您将能够在导航到子组件之前调用上述方法（“当他访问特定页面时每次都会调用的方法”）。这是一种方式。另一种方法是使用Input绑定。进一步了解组件互动here

问题2：

如果LoginPage组件的此问题与您的第一个问题有关（以便Login组件是Home组件的子组件），则可以在login()中导航之前（或之后）手动重置表单。方法：

    login(): void {
        this.navCtrl.navigateForward('/menu');
        this.loginForm.reset();
}

Answer 3

代替

this.navCtrl.navigateForward('/menu');

您可能需要

this.navCtrl.navigateRoot('/menu');

之所以这样，是因为当您使用前者时，原始视图不会被破坏，只是隐藏在新视图后面的视图中。

看看这个blog post

Answer 4

您可以在组件销毁时重置表格。

 ionViewWillUnload() {
   this.loginForm.reset();
 }

回来时无法清除反应形式的数据

问题1：

问题2：

login.ts

login.html

4 个答案: