Angular里的消息(Message)显示

使用命名行创建一个Angular Component：

ng generate component messages

创建一个message service：

ng generate service message

message service的实现：其实就是内部维护了一个字符串数组，存储其他Component添加的message：

通过构造函数参数注入的方式将message service注入到hero service中：

在hero Service里消费message Service：

需要在message Component里显示message Service内部维护的字符串数组：

注意，此处11行的messageService必须定义成public，因为需要在Component view的html里使用它。

The messageService property must be public because you’re going to bind to it in the template.

Angular only binds to public component properties.

message Component的实现：

<div *ngIf="messageService.messages.length">

  <h2>Messages</h2>
  <button class="clear"
          (click)="messageService.clear()">clear</button>
  <div *ngFor='let message of messageService.messages'> {{message}} </div>

</div>

最后的效果：