Angular里的消息(Message)显示

130 阅读1分钟

使用命名行创建一个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>

最后的效果:

要获取更多Jerry的原创文章,请关注公众号"汪子熙":