Angular 英雄之旅-为什么要更新消息？

我是angular.io的新手，在《英雄之旅》的应用程序中游手好闲，没有完全遵循教程，尝试了一些不同的东西。 有些神奇的事情发生了，我不明白。如果我在选择英雄时使用MessageService添加消息，消息列表将使用新消息更新。问题是，我不明白为什么在message组件中，我只在ngOnInit（）中调用getMessages（），而我的message组件有自己的消息列表。我没有直接显示服务的内容。那么，它们为什么会被展示出来呢

不知何故，我的消息组件中的消息列表似乎与消息服务中的消息列表相耦合，但为什么呢

message.component.ts

从'@angular/core'导入{Component，OnInit}；
从“../message.service”导入{MessageService}；
@组成部分({
选择器：“应用程序消息”，
templateUrl:'./messages.component.html'，
样式URL:['./messages.component.css']
})
导出类消息组件实现OnInit{
消息：字符串[]=[]；
构造函数（私有消息服务：消息服务）{}
恩戈尼尼特（）{
这是getMessages（）；
}
getMessages（）：void{
this.messages=this.messageService.getMessages（）；
}
clear（）：void{
this.messageService.clear（）；
这是getMessages（）；
}
}

message.component.html

信息
清楚的
{{message}}

heromes.component.ts

从'@angular/core'导入{Component，OnInit}；
从“../Hero”导入{Hero}；
从“../hero.service”导入{HeroService}；
从“../message.service”导入{MessageService}；
@组成部分({
选择器：“应用程序英雄”，
templateUrl:“./heroes.component.html”，
样式URL:['./heromes.component.css']
})
导出类HeroesComponent实现OnInit{
英雄：英雄[]；
选择英雄：英雄；
构造器（专用heroService:heroService，
私有消息服务：消息服务）{}
恩戈尼尼特（）{
这个。getheros（）；
}
onSelect（英雄：英雄）：无效{
this.selectedHero=英雄；
this.messageService.add（'Select hero'）；
}
getHeroes（）：void{
this.heroService.getHeroes（）.subscribe（heroes=>this.heroes=heroes）；
}
}

从'@angular/core'导入{Injectable}；
从'rxjs'导入{可观察的}；
@注射的({
providedIn:'根'，
})
导出类消息服务{
消息：字符串[]=[]；
添加（消息：字符串）{
this.messages.push（message）；
}
清除（）{
this.messages=[]；
}
getMessages（）{
返回此消息；
}
}

魔法就在对象引用中。在NgOnInit中，您仅在服务向数组添加消息时提供对消息数组的引用。组件中指向同一数组的数组也将获得新消息，因为它是RAM中的同一数组

有关更多信息，请查看此处：

---

摘自《英雄之旅》-

使用声明私有messageService属性的参数修改构造函数。Angular将向该属性注入singleton MessageService

---

发生的情况是，依赖关系是通过构造函数中的参数请求注入的。ngOnInit调用getMessages。由于messenger服务器是一个单例服务器，这意味着整个应用程序中只有一个实例，因此messenger服务的getMessages最终会在消息组件的init上被调用。

好的，我想我从来没有用javascript做过很多工作……谢谢：-）