Question

我订阅了服务：

login(): void {
    if (!this.loginForm.valid) {
        return;
    }
    const { email, password } = this.loginForm.value;

    this.authService.login(email, password).subscribe((res) => {
        if (res.ok) {
            this.router.navigateByUrl('/dashboard');
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: res.errorMessage,
            });
        }
    });
}

这个方法是在表单sumbited时调用

<h1 class="mat-display-2 mb-0">Login</h1>

<form [formGroup]="loginForm" (submit)="login()">
    <div class="form-group">
        <mat-form-field class="form-field" appearance="standard">
            <mat-label>Email</mat-label>
            <label>
                <input matInput formControlName="email" type="email" />
            </label>
            <mat-error *ngIf="controls.email.errors">
                <span *ngIf="controls.email.errors.required">{{ 'auth.EMAIL_REQUIRED' | transloco }}</span>
                <span *ngIf="controls.email.errors.email">{{ 'auth.INVALID_EMAIL' | transloco }}</span>
            </mat-error>
        </mat-form-field>
    </div>

    <div class="form-group">
        <mat-form-field class="form-field" appearance="standard">
            <mat-label>{{ 'auth.PWD' | transloco }}</mat-label>
            <label>
                <input matInput formControlName="password" type="password" />
            </label>
            <mat-error *ngIf="controls.password.invalid">{{ 'auth.PWD_REQUIRED' | transloco }}</mat-error>
        </mat-form-field>
    </div>

    <p *transloco="let t">
        {{ t('auth.LOGIN_HELP') }}
        <a class="d-inline" routerLink="../signup" *transloco="let t">{{ t('auth.SIGNUP') }}</a>
    </p>

    <div class="text-right m-3">
        <button mat-raised-button color="primary" class="mat-elevation-z8" type="submit" *transloco="let t">
            {{ t('auth.LOGIN') }}
        </button>
    </div>
</form>

当我更改界面中的语言时出现问题，因为订阅身份验证服务是使用先前响应形式的值调用的，例如，如果发生先前的错误，它会再次使用新语言触发

¿我该如何解决？

我正在使用 transloco 语言库

完整的登录组件

import { Component } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import Swal from 'sweetalert2';
import { AuthService } from '../../services/auth.service';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
})
export class LoginComponent {
    loginForm: FormGroup = this.formBuilder.group({
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required]],
    });

    constructor(private formBuilder: FormBuilder, private router: Router, private authService: AuthService) {}

    get controls(): { [key: string]: AbstractControl } {
        return this.loginForm.controls;
    }

    login(): void {
        if (!this.loginForm.valid) {
            return;
        }
        const { email, password } = this.loginForm.value;

        this.authService.login(email, password).subscribe((res) => {
            if (res.ok) {
                this.router.navigateByUrl('/dashboard');
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: res.errorMessage,
                });
            }
        });
    }
}

编辑

我找到了一个解决方案，但有点奇怪......

login(): void {
    if (!this.loginForm.valid) {
        return;
    }
    const { email, password } = this.loginForm.value;

    let subs: Subscription;
    subs = this.authService.login(email, password).subscribe((res) => {
        if (res.ok) {
            this.router.navigateByUrl('/dashboard');
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: res.errorMessage,
            });
        }

        subs.unsubscribe();
    });
}

Answer 1

我确信有更好的方法来做到这一点（RxJS 周围有很多运算符和用例），但作为一个有效的解决方案/解决方法，如果您只拿起第一个发出的 observable，问题就会得到解决使用 RxJS Operator “take”，这样你就可以摆脱接下来的重复订阅。

示例：在您的 AuthService 调用中添加一个 take(1)：

 this.authService
   .login(email, password)
   .pipe(take(1))
   .subscribe(...)

干杯。

Answer 2

我认为使用 take(1) 操作符应该是更好的方式，就像订阅进入 if 块一样，它进入另一个页面而不取消订阅。否则，您还可以确保取消订阅 onDestroy()。 take(1) 将自动涵盖这种情况，因为它仅在第一个数据到来后取消订阅。 https://www.learnrxjs.io/learn-rxjs/operators/filtering/take

Angular 订阅被多次调用

2 个答案: