2016-04-06 5 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

Лучшей практикой является предоставление услуги частным и использование метода в вашем компоненте для вызова службы. Обычно символ подчеркивания в имени переменной означает, что он должен быть закрытым.

constructor (
    private _authService: AuthService 
    ) {} 

Это сохраняет ваш код более модульным. Если вы решите использовать службу разницы или написать свою собственную логику, чтобы сделать то же самое, вам не нужно будет обновлять HTML-код в шаблоне. Вы просто обновите свой метод.

+0

Это имеет смысл, спасибо! – spez86