ルートガードのための別のサービスへの1つのサービスの角度依存性注入

Question

私の角形のアプリケーションでは、私はhttpレイヤーを扱う2つのサービスを持っていて、もう1つは単にルートのガードであるcanActivateメソッドを実装していますサービス。たとえば：

backend.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; 
    } 
} 

routeguard.service：

@Injectable() 
export class RouteguardService implements CanActivate { 
    constructor(private backendService: BackendService) { } 
    canActivate() { 
     return this.backendService.getData() !== 'initial'; 
    } 
} 

私は私が間違った場所にサービスのいずれかを提供しています信じますか？現在私はprovidersの両方のサービスを私のapp.moduleの配列に持っています。しかし、私はconsole.logステートメントで、backend.serviceがルーティングの一部として呼び出されたときとコンポーネントがそれを使用するときに別々にnew'dされていることを知ることができるので、データは異なり、データは常に 'initialコンポーネントから何か他のものに設定されているにもかかわらず、canActivateメソッドでチェックされているときに発生します。私はそれをはっきりと説明したいと思っています。

サービスを別の場所に提供する必要があるのですか、それとも何か他のことがまったく間違っていますか？任意のポインターをありがとう。

Answer 1

私は、問題は、私は偶然にも、そのサブコンポーネントが1つのインスタンスが注入されなければならないことを意味しapp.componentプロバイダは、しかし、私のルートファイル内の1つのではなく、これapp.moduleプロバイダから注入されたルートにbackend.serviceが含まれていることに気づきました重複したサービスとデータの不一致

解決策はapp.componentからサービスを削除し、代わりにapp.moduleで提供することでした。

Answer 2

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; 
    } 
} 

その後、ゲッターとセッターを使用して外にプライベート静的data値にアクセスすることができます。質問から理解されるように

@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 
    } 
} 

、canActivateガードで例えば同じようにあなたは正しい場所でサービスを提供しています。これが解決するか試してみてください。