服務構造函數兩次調用

Question

我有以下服務：

@Injectable({
  providedIn: 'root'
})

export class AuthService {

  user: Observable<User>;
  checkEmailInterval: any;

  constructor(
    private afAuth: AngularFireAuth,
    private afStore: AngularFirestore,
    private router: Router
  ) {
    this.user = this.afAuth.authState.pipe(
      switchMap(user => {
        if (user) {
          console.log(user);
          if (!user.emailVerified) {
            console.log(this.checkEmailInterval);
            clearInterval(this.checkEmailInterval);
            this.checkEmailInterval = setInterval(this.checkEmailVerified.bind(this), 5000);
          }
          return this.afStore.doc<User>(`users/${user.uid}`).valueChanges();
        }
        else {
          console.log("NO USER");
          return of(null);
        }
      })
    );
  }

每當我打開應用程序時，其構造函數都會被調用兩次。 這是預期的行為嗎？ 我以為可能是為注入的每個組件調用構造函數，但是我在3個組件中使用了該服務。

除此以外，我真的不確定要共享我的代碼的哪一部分。 有任何想法嗎？

Answer 1

您可以嘗試在ngOnInit中移動此邏輯。 按照角度，所有將ProvidedIn屬性用作“ root”的可注入服務將被視為單例類，並且將被實例化一次。

@Injectable({
  providedIn: 'root'
})

export class AuthService implements OnInit {

  user: Observable<User>;
  checkEmailInterval: any;

  constructor(
    private afAuth: AngularFireAuth,
    private afStore: AngularFirestore,
    private router: Router
  ) {}

  ngOnInit(){
    this.user = this.afAuth.authState.pipe(
      switchMap(user => {
        if (user) {
          console.log(user);
          if (!user.emailVerified) {
            console.log(this.checkEmailInterval);
            clearInterval(this.checkEmailInterval);
            this.checkEmailInterval = setInterval(this.checkEmailVerified.bind(this), 5000);
          }
          return this.afStore.doc<User>(`users/${user.uid}`).valueChanges();
        }
        else {
          console.log("NO USER");
          return of(null);
        }
      })
    );
  }
}