Question

我是angular.io的新手，正在玩英雄的应用程序之旅，没有完全遵循本教程并尝试一些不同的事情。有一些不可思议的事情正在发生。如果在选择英雄时使用MessageService添加消息，则消息列表将更新为新消息。问题是我不明白为什么像在消息组件中那样，仅在ngOnInit（）中调用getMessages（），而我的消息组件却有自己的消息列表。我没有直接显示该服务的内容。那么为什么要显示它们呢？

以某种方式，我在消息组件中拥有的消息列表似乎与消息服务中的消息列表耦合了，但是为什么呢？

message.component.ts

import { Component, OnInit } from '@angular/core';
import { MessageService } from '../message.service';

@Component({
  selector: 'app-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {
  messages: string[] = [];

  constructor(private messageService: MessageService) { }

  ngOnInit() {
    this.getMessages();
  }

  getMessages(): void {
    this.messages = this.messageService.getMessages();
  }

  clear(): void {
    this.messageService.clear();
    this.getMessages();
  }
}

message.component.html

<div *ngIf="messages.length">

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

</div>

heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
import { MessageService } from '../message.service';


@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private heroService: HeroService,
              private messageService: MessageService) { }

  ngOnInit() {
    this.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
    this.messageService.add('Select hero');
  }

  getHeroes(): void {
    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
  }

}

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class MessageService {
  messages: string[] = [];

  add(message: string) {
    this.messages.push(message);
  }

  clear() {
    this.messages = [];
  }

  getMessages() {
    return this.messages;
  }
}

Answer 1

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

有关更多信息，请参见此处： https://www.dyn-web.com/javascript/arrays/value-vs-reference.php

Answer 2

摘自《英雄的天使之旅》文档-

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

正在发生的事情是，依赖项是通过构造函数中的参数请求注入的。 ngOnInit调用getMessages。由于Messenger服务器是单例服务器，因此在整个应用程序中只有一个实例，因此最终在消息组件的init上调用Messenger服务的getMessages。

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

2 个答案: