Question

在我的角度应用程序中，我有两个服务，一个处理http层，另一个只是一个路由保护，用于实现与第一个服务的状态相关的方法。例如：

backend.service：

canActivate

routeguard.service：

@Injectable()
export class BackendService {
    private data: any;
    constructor(private http: Http) {
        console.log('backend service constructor hit');
        this.data = 'initial';
    }
    getData() {
        console.log(this.data);
        return this.data;
    }
    setData(data) {
        // http stuff
        this.data = data;
    }
}

我相信我在错误的位置提供其中一项服务？目前，我在@Injectable() export class RouteguardService implements CanActivate { constructor(private backendService: BackendService) { } canActivate() { return this.backendService.getData() !== 'initial'; } }的{{1}}数组中都有这两项服务。但我可以通过console.log语句告诉providers当它作为路由的一部分被调用而不是组件使用它时，它是单独的新的，因此数据是不同的和数据永远回来作为＆＃39; initial＆＃39;在canActivate方法中检查时，尽管它已从组件设置为其他内容。希望我能清楚地解释一下，我仍然是棱角分明的新人。

我是否需要在其他位置提供其中一项服务，或者我是否完全做错了其他事情？谢谢你的任何指示。

Answer 1

尝试将您要在BackendService中设置的属性声明为static。然后使用getter和setter来访问它。不要在服务的constructor中初始化它。

@Injectable()
export class BackendService {
    private static data: any = 'initial';
    constructor(private http: Http) {
        console.log('backend service constructor hit');
    }
    get data() {
        console.log(this.data);
        return BackendService.data;
    }
    set data(data: any) {
        // http stuff
        BackendService.data = data;
    }
}

然后，您可以使用getter和setter访问外部的私有静态data值。例如在canActivate后卫中，

@Injectable()
export class RouteguardService implements CanActivate {
    constructor(private backendService: BackendService) { }
    canActivate() {
        return this.backendService.data !== 'initial';
        // this.backendService.data <-- denotes getter
        // this.backendService.data = 'not-initial'; <-- denotes setter
    }
}

您正在从问题中理解的正确位置提供服务。试试看是否可以修复它。

Answer 2

我意识到问题是我不小心也将backend.service包含在根app.component提供程序中，这意味着它的子组件会注入一个实例，但是我的路由文件中的一个是而是从app.module提供者注入，因此重复的服务和数据的差异。

因此，解决方案是从app.component移除服务，并始终由app.module提供。

一个服务的角度依赖注入到另一个服务用于路由防护

2 个答案: