2016-04-06 21 views
1

ng2でコンポーネントとサービスの通信を扱う際に、「ベストプラクティス」タイプの提案を探しています。コンポーネントとインジェラブル間の通信2

のは、例えば、私は、次のしているとしましょう:

//auth.service.ts 
import {Injectable} from 'angular2/core'; 

@Injectable() 
export class AuthService { 

    login() { 
     //do some login stuff here 
    } 

} 

//login.component.ts 
import {Component} from 'angular2/core'; 
import {AuthService} from './path/to/auth.service'; 

@Component({ 

    selector: 'app-login', 
    template: '<button (click)="">Login</button>', 
    providers: [AuthService] 

}) 

export class LoginComponent { 

    constructor (
    public _authService: AuthService 
    ) {} 

} 

私の質問は主にこの中心とする:

<button (click)="">Login</button> 

私はちょうど(click)="_authService.login()"ような何かを行う必要がありますか、私が作成する必要がありますLoginComponentの内部のログインメソッドを参照し、そのビューを参照しますか?

<button (click)="login()">Login</button> 

export class LoginComponent { 

    constructor (
    public _authService: AuthService 
    ) {} 

    login() { 
    this._authService.login(); 
    } 

} 

ビューは、その後、完全にサービスから切り離されているようにそれは感じているので、私はしかし、私は人々が最初のアプローチを好むのコメントを見てきました、後者を考えています。さらに、_authServiceにもビューにバインドする必要のあるデータがある場合がありますが、ビューでそのデータの変更を検出できる唯一の方法は、_authServiceに直接バインドすることです。

これらの2つの間で通信を作成する場合、どのアプローチがベストプラクティスと考えられますか?

答えて

2

ベストプラクティスは、サービスをプライベートにし、コンポーネント内のメソッドを使用してサービスを呼び出すことです。通常、変数名のアンダースコアは、それがプライベートであることを意味していたことを意味します。

constructor (
    private _authService: AuthService 
    ) {} 

これにより、コードがモジュール化されます。差別化サービスを使用するか、独自のロジックを記述して同じことをする場合は、テンプレート内のHTMLを更新する必要はありません。メソッドを更新するだけです。

+0

これは完璧な意味合いです、ありがとうございます! – spez86

関連する問題