Angular 7 服务文件不保持可变状态

debugcn 发表于 Dev

马特

我有 2 个组件和 1 个服务文件，有一个登录组件和一个仪表板组件。

这是我的登录组件，它订阅服务文件中的 http 请求。当我控制台日志时，this.userService.user它会正确返回。当我路由到dashboard并记录this.userService.user仪表板组件内部时，它的未定义。

import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { UserService } from "../../shared/services.module";

@Component({
    selector: "login",
    moduleId: module.id,
    templateUrl: "./login.component.html",
    styleUrls: ["./login.css"],
})
export class LoginComponent implements OnInit {
    email: string;
    password: string;

    constructor(private router: RouterExtensions, private userService: UserService) { }

    signUp() {
      this.userService.login(this.email, this.password)
      .subscribe(res => {
          console.log(this.userService.user)
          this.router.navigate(["/dashboard"], { clearHistory: true, animated: false });
      });
    }

    ngOnInit(): void {
    }
}

这是我的仪表板组件，当我记录this.userService.user它的未定义时。

import { Component, OnInit, Input } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { UserService } from "../../shared/services.module";

@Component({
    selector: "dashboard",
    moduleId: module.id,
    templateUrl: "./dashboard.component.html",
    styleUrls: ["./dashboard.css"],
})
export class DashboardComponent implements OnInit {
    constructor(private router: RouterExtensions, private userService: UserService) {
   }

    ngOnInit(): void {
      console.log(this.userService.user)
      console.log(this.userService.getUserName())
    }
}

这是我的服务文件

import { Injectable } from "@angular/core";
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { Config } from "../config";
import { catchError } from 'rxjs/operators';
import { map, delay, retryWhen, take } from 'rxjs/operators';
import { HttpErrorHandler, HandleError } from '../../http-error-handler.service';
import { User } from '../../models/user/user'

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
  })
};
@Injectable()
export class UserService {
  user: any;
  private handleError: HandleError;

  constructor(private http: HttpClient, httpErrorHandler: HttpErrorHandler) {
    this.handleError = httpErrorHandler.createHandleError('HeroesService');
  }

  getUserName() {
    console.log("return name");
    console.log(this.user)
    if (!this.user) {
      return "failed";
    }
    console.log(this.user.name)
    return this.user.name
  }

  login(email, password) {
    let data = JSON.stringify({'email': email,'password': password})
    return this.http.post(Config.userUrl + 'login', data, httpOptions)
    .map((res: any) => {
      let u = res.user
      this.user = new User(u.name, u.email)
      console.log(this.user)
      return res
    })
    .pipe(
      catchError(this.handleError('login', null))
    );
  }
}

奇怪的是，当我什至使用辅助函数时，例如getUserName只返回名称，即使在服务文件中它仍然未定义。

知道为什么它返回未定义吗？任何帮助将不胜感激。谢谢

罗曼·西米克

试试这个：

模块你在哪里提供服务

@NgModule({
    imports: [
        ...
    ],
    declarations: [
        ...
    ],
    providers: [
        ... // You have propably there the service that you want to provide globally, remove it
    ]
})
export class YourModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: YourModule, // name of this module
            providers: [ YourService ] // put there the service, that you want to provide globally
        };
    }
}

app.module.ts

@NgModule({
    declarations: [
        AppComponent,
        ...
    ],
    imports: [
        ...
        YourModule.forRoot() // add this
    ],
    providers: [
        ...
    ],
    bootstrap: [ 
        AppComponent 
    ]
})
export class AppModule {
}

您希望在全球范围内提供的服务

@Injectable() // remove the "providedIn: ..." if you have it there
export class YourService {
    ...
}

组件

@Component({
    selector: "dashboard",
    moduleId: module.id, // remove this line
    templateUrl: "./dashboard.component.html",
    styleUrls: ["./dashboard.css"],
})
export class DashboardComponent implements OnInit {
     ...
}

并且不要忘记导入YourModule到imports要使用的模块的YourService.

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。