Angular 2服务初始化逻辑

Question

我有一个名为JwtService.ts的角度2服务，用于检查 JWT令牌，并在我的不同组件中使用它，以便了解用户是访客还是登录成员。< / p>

每次服务启动时我都会从我的LocalStorage获得令牌，但由于某些原因，它正在寻找它3次（每次使用该服务的组件）并且我很确定它必须是所有组件仅重复一次。

查看我的JwtService.ts:

的以下代码

export class JwtService {

    private jwtToken = localStorage.getItem("jwt");
    public myData = this.getUserData();

    constructor(public router: Router,private http: Http) {
    }

    getToken() {
        return this.jwtToken;
    }

    setToken(theToken)
    {
        localStorage.setItem('jwt', theToken);
        this.jwtToken = localStorage.getItem("jwt");
    }

    logOut()
    {
            this.jwtToken = null;
            localStorage.removeItem("jwt");
            this.router.navigate( ['Home'] );
    }

    getUserData()
    {
    console.log("Getting user..");
    this.http.get('http://localhost/PokemonAPI/public/api/v1/thisUser?token='+this.getToken())
      .map((res:Response) => res.json())
      .subscribe(
        data => {this.myData = data.user;
        console.log()
        },
        err => {
            this.JwtService.checkToken(err);
            console.error(err); },
        () => console.log("User logged!");
      );
    }

    getUser()
    {
        return this.myData;
    }
}

是的，它有效，但如果我检查我的浏览器控制台，我会看到：

这意味着浏览器加载了3次服务并在一次运行中使用了我的HTTP GET 3次。 为什么会这会导致这种情况？

Answer 1

我认为这是因为你添加了

providers: [JwtService]

有3个不同的组件。

仅在根组件（AppComponent）上添加，或者在bootstrap(AppComponent, [JwtService]);

中添加

对于添加它的每个组件，DI都会维护一个新实例。