使用命名行创建一个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>
最后的效果: