Является ли хорошей практикой ссылки на службы в html-шаблонах в Angular 2?

Question

Поскольку вопрос государств, есть ли недостаток в ссылке на службу непосредственно в шаблоне, как например:

[disabled]="stateService.selectedClient == null || stateService.currentStep == 1" 

На мой взгляд, это не кажется хорошей практикой, и я бы предпочел держать «selectedClient «объект в любом компоненте должен его использовать. Как я могу получить состояние и сохранить его в локальных переменных при наблюдении за изменениями:

пример: я хочу перейти от шага 1 к шагу2, изменив «currentStep» в «stateService», однако я хочу, чтобы компонент, который хранит "currentStep" ТАКЖЕ как локальная переменная, отражающая изменение состояния?

Answer 1

Хорошая практика для ссылок на услуги в html-шаблонах в Angular 2?

Как правило, я избегаю этого. Кажется, это приносит больше хаоса, чем пользы.

Минусы:

• Исходя из OOP фоне, такой подход выглядит, как он ломает Law of Demeter, но что более важно,
• Это больше не MVC, где контроллер (Angular2-х Component) действует как посредник между вид и услуги.
• Как Ced сказал, что если вызов участника службы является дорогостоящим, и нам нужно ссылаться на него несколько раз в представлении?
• На данный момент мой редактор выбора (VS Code) не полностью поддерживает шаблоны Angular2; ссылаясь на слишком много вещей за пределами своей собственной области Component в template делает рефакторинг не интересным больше.

Плюсы:

• Иногда это выглядит более элегантно (потому что это экономит вам 2 строк кода), но поверьте мне, это не так.

Как я могу получить состояние и сохранять его в локальных переменных, в то время как наблюдения изменений

Madhu Ranjan имеет хороший ответ на это.Я просто пытаюсь сделать его более целостным здесь для вашего конкретного примера:

В вашем StateService определите:

currentStep : Subject<number> = new Subject<number>(); 
selectedClient: Subject<Client> = new Subject<Client>(); 

changeStep(nextStep: number){   
    this.currentStep.next(nextStep); 
} 

selectClient(client: Client) { 
    this.selectedClient.next(client); 
} 

В вашей Component:

currentStep: number; 

constructor(stateService : StateService){ 
    stateService.currentStep.combineLatest(
    stateService.selectedClient, 
    (currStep, client) => { 
     if (client == null) { 
     // I'm assuming you are not showing any step here, replace it with your logic 
     return -1; 
     } 
     return currStep; 
    }) 
    .subscribe(val => { 
    this.currentStep = val; 
    }); 
} 

Answer 2

Вы можете попробовать ниже,

stateService

currentStep : Subject<number> = new Subject<number>(); 

somestepChangeMethod(){   
    this.currentStep.next(<set step here to depending on your logic>); 
} 

компонент

// use this in template 
currentStep: number; 

constructor(stateService : stateServiceClass){ 
    stateService.currentStep.subscribe(val => { 
     this.currentStep = val; 
    }); 
} 

Надежда это помогает !!

Answer 3

Это, вероятно, не является хорошим идея разоблачить вашу тему внутри вашей государственной службы. Что-то вроде этого было бы лучше.

StateService

private currentStep: Subject<number> = new Subject<number>(); 

changeStep(value: number) { 
    this.currentStep.next(value); 
} 

get theCurrentStep(): Observable<number> { 
    this.currentStep.asObservable(); 
} 

Компонент

currentStep: number; 

constructor(private stateService: StateService) { 
    this.currentStep = this.stateService.theCurrentStep; 
} 

Шаблон

[disabled]="(currentStep | async) == 1" // Not sure if this part would work