在Angular 2中将表示逻辑与app逻辑分开的最佳实践是什么？

Question

是否可以将表示逻辑（例如，切换UI，显示/隐藏模式对话框等）与组件级别完全分开？因此组件只会处理数据，因此组件将不具有与hideModal()或showModal()等UI相关的功能。

Answer 1

您可以将每个逻辑移动到服务，然后将视图绑定到服务。

@Injectable()
export ModalService {
  show:bool = false;
  hideModal() { this.show = false; }
  showModal() { this.show = true; }
}

@Component({
   template: '<div>{{modalService.show}}</div><button (click)="modalService.show ? modalService.hide() : modalService.show()">toggle</button>
   providers: [ModalService],
})
class ModalComponent {
  constructor(private:modalService:ModalService){}
}