Question

我正在使用angular2和打字稿。在我设置的其中一个服务中，获取变量的值如下：

import {Injectable} from '@angular/core';

@Injectable()
export class UserProfileService {
    isLoggedIn: boolean;

    constructor() {

    }

    setLoggedInStatus(status) {
        console.log('status: ', status);
        this.isLoggedIn = status;
        console.log('this.isLoggedIn : ', this.isLoggedIn)    //setting to true or false here
    }

    getLoggedInStatus() {
        return this.isLoggedIn;
    }
}

但是当我尝试使用getLoggedInStatus（）获取值时，我每次都会得到未定义。为什么会这样？

在此设置

import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {SharedService} from '../../shared.service';
import {UserProfileService} from '../../authComponent/login/user-profile.service';

@Component({
    selector: 'login',
    templateUrl: 'app/components/authComponent/login/login.component.html',
    providers: [SharedService, UserProfileService]
})

export class LoginComponent implements OnInit {
    matched: boolean = false;

    constructor(private sharedService: SharedService, private userService: UserProfileService) {
    }

    ngOnInit() {
        this.myForm = new FormGroup({
            email: new FormControl('', [Validators.required]),
            password: new FormControl('', [Validators.required])
        })
    }

    submit({value, valid}) {
        if (!valid) {
            return;
        }
        else {
            this.sharedService.getData('users')
                .subscribe(result => {
                    console.log('result: ', result, 'value passed: ', value)
                    result.forEach((record) => {
                        if ((record.email == value.email && record.password == value.password) && !this.matched) {
                            this.matched = true;
                        }
                        else {
                            this.matched = false;
                        }
                    });

                    if (!this.matched)
                        console.log('wrong credentials entered');
                    this.userService.setLoggedInStatus(this.matched);
                })

        }
    }
}

到达

import {Injectable} from '@angular/core';
import {
    CanActivate,
    CanActivateChild,
    Route,
    Router,
    ActivatedRouteSnapshot,
    RouterStateSnapshot
} from '@angular/router';

import {UserProfileService} from './authComponent/login/user-profile.service';

@Injectable()
export class CanActivateAuthGuard implements CanActivate, CanActivateChild {
    constructor(private userProfileService: UserProfileService, private router: Router) {
    }

    canActivateChild(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        return this.canActivate(next, state);
    }

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        console.log('this.userProfileService.getLoggedInStatus: ', this.userProfileService.getLoggedInStatus())
        if (this.userProfileService.getLoggedInStatus()) {
            return true;
        }
        this.router.navigate(['/login'], {queryParams: {redirectTo: state.url}});
        return false;
    }
}

Answer 1

在调用`setLoggedInStatus（..）之前，你有没有调用getLoggedInStatus()？

如果是这样，你从未初始化你的isLoggedIn布尔成员变量，因此，它仍然是未定义的。

您可以通过在声明时初始化isLoggedIn来绕过此问题

export class UserProfileService {
   isLoggedIn = false;  // or true
.....

请注意，我没有必要声明类型 - Typescript从初始化的值中推断出它。

编辑：

根据您更新的帖子，我注意到您已将服务添加到组件的提供商列表中。根据您希望如何使用该服务，您不希望这样做。将服务添加到组件的提供商列表或多或少地告诉Angular我不希望此组件与其他任何人共享我的服务实例 - 我希望此组件拥有自己的实例该服务。

根据您的使用情况，您实际上希望将该服务添加到AppModule的提供商列表中。

see this other question for almost the same scenario

Answer 2

角度服务是注入式的意思，它们可以在需要时调用。如果您正在使用配置变量和全局变量，可以通过在AppModule中声明如下

来使用它们

    import {Component, NgModule} from '@angular/core'
    import {BrowserModule} from '@angular/platform-browser'

    @Component({
      selector: 'my-app',
      template: `
        <div>
          <h2>{{name}} Sample</h2>
          {{myConfiguration | json}}
        </div>
      `,
    })
    export class App {
      name:string;
      myConfiguration:any=myConfiguration;
      constructor() {
        console.log(myConfiguration);
        this.name = 'Global Configuration'
      }
    }

    @NgModule({ 
      imports: [ BrowserModule ],
      declarations: [ App ],
      bootstrap: [ App]
    })
    export class AppModule {
        var myConfiguration={id:1,devmode:true};  

    }

<强> LIVE DEMO

Answer 3

要让单件服务实例只是将该服务作为提供者添加到一个模块中，而不是在其他地方提供该服务。

最简单的方法是将服务添加到@NgModule({ ... providers:[ UserProfileService ] }) export class AppModule {}提供商。

app.module.ts：

.nav-list

那将完成这项工作。

在typescript中获取set变量

3 个答案: