【我是菜鸟】【angular的十万个为什么】——0917

1.为什么需要服务

服务定义了其他组件（或指令）所需要用到的功能（函数）。组件（component）在构造函数中注入需要用到的服务。

组件应该把诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作委托给各种服务。通过把各种处理任务定义到可注入的服务类中，你可以让它被任何组件使用。

对于要用到的任何服务，你必须至少注册一个提供商。一般用在@Injectable() 装饰器中 使用 providedIn 属性进行配置（一般为"root",即根模块）

1. 1 服务用于访问数据。

组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。

1. 2 服务用于单元测试
组件可以把写日志的工作委托给服务，便于隔离构造块以进行有效的单元测试
1. 3 通过服务可复用程序
1. 4 服务是在多个“互相不知道”的类之间共享信息的好办法。
同一模块（ngModule）下，当某个组件需要注入某个服务时，Angular首先会检查该注入器中是否已经有了该服务的实例。
简单来说，就是不同组件可以共享同一个服务的实例。
官方例子：父组件和子组件通过服务来通讯

2.为什么需要@HostBinding？

2.1 @HostBinding是什么?

一个装饰器，用于把一个 DOM 属性标记为绑定到宿主的属性，并提供配置元数据。 Angular 在变更检测期间会自动检查宿主属性绑定，如果这个绑定变化了，它就会更新该指令所在的宿主元素

简单来说它可以实现ngClass、ngStyle等指令的功能,而且更强，可以动态给宿主元素绑定DOM属性

2.2 为什么要用@HostBinding?
确实，更多时候我们使用@HostBinding指令也只是绑定class或style。事实上，我们要绑定其他Dom属性也经常是直接写在html模板中，那这个指令什么时候可以用到呢？
重点就是宿主元素，宿主元素在模板中是不可见的，没有@HostBinding指令我们想要给宿主元素绑定属性是很麻烦的一件事，可能要用到querySelector先获取到宿主元素，而这是很容易出问题的。
它还有很方便的一点，可以直接和@Input结合：

 @Input()
  @HostBinding('class.hide')
  isHidden:boolean = true;

这里是父组件动态传入isHidden，动态给子组件加上hide类，父组件可以轻易控制子组件的显示/隐藏。

3.为什么需要@HostListener？

3.1 @HostListener是什么?
@HostListener指令用于声明要侦听宿主元素的DOM事件，并提供在该事件发生时运行的处理程序方法。
看看这个例子：

  @HostListener('click',['$event'])
  onclick($event){
    $event.preventDefault();
    $event.stopPropagation();
    this.isHidden = !this.isHidden;
  }

这里是在用户点击父组件（空白处）后，将isHidden取反，配合上面子组件的@Input、@HostBinding指令，实现隐藏或显示子组件的效果。

3.2 为什么要用@HostListener?

• 很方便地给宿主元素绑定事件
• 组件销毁时会自动释放资源，而自己手动用js的addEventListener还可能会造成内存问题。