在 Angular 9 中，如何更新组件的数据字段以在 DOM 中显示而不重新实例化它？

Question

我对 Angular 9 还很陌生。我有一个程序，用户输入一个名称 - 在提交时 - 发送一个 POST HTTP 请求并存储该名称。然后，我有一个不相关的子标题组件，它列出了使用 ngOnInit() 的 GET HTTP 请求存储的名称。但是，我需要子标题在每次输入新列表时动态更新该名称列表，而不仅仅是在组件实例化时。我不确定如何进行。我确信我可以简单地添加一个按钮来获取和更新所述列表，但尝试更动态的东西。提前致谢！//SERVICE.TS...import { Injectable } from '@angular/core';import { HttpClient } from '@angular/common/http';import { NewList } from './new-list.model';import { map } from 'rxjs/operators';@Injectable({  providedIn: 'root'})export class ListService {  createdLists: NewList[] = [];  constructor(private http: HttpClient) { }  createList(postData) {    return this.http      .post(        'API_KEY',        postData      );  }  getLists() {    return this.http      .get<NewList>(        'API_KEY'      ).pipe(map(responseData => {            const responseArray: NewList[] = [];            for (const key in responseData) {              responseArray.push(responseData[key])            }            return responseArray;          })        );  }}// NEW-LIST-MENU.TS (USER ENTERS A NAME)...import { Component, OnInit } from '@angular/core';import { NgForm } from '@angular/forms';import { Router } from '@angular/router';import { ListService } from 'src/app/shared/list.service';import { NewList } from 'src/app/shared/new-list.model';import { UIService } from 'src/app/shared/ui.service';@Component({  selector: 'app-new-list-menu',  templateUrl: './new-list-menu.component.html',  styleUrls: ['./new-list-menu.component.css']})export class NewListMenuComponent implements OnInit {  constructor(private listService: ListService,              private uiService: UIService,              private router: Router) { }  ngOnInit(): void {  }  onSubmit(form: NgForm) {    const listName = form.value.listname;    const newListObj = new NewList(listName, []);        this.listService.createList(newListObj)      .subscribe(() => {        this.router.navigate(['']);      });    const lists = this.listService.updateLists(newListObj);            form.reset();  }

Answer 1

您可以通过多种方式完成此操作，因为这些组件彼此不相关，您可以引入状态服务并使用可观察对象。请参阅下面可能的解决方案

创建一个新的状态服务 ListStateService

 export class ListStateService {

     private listData = new BehaviorSubject<NewList >({} as NewList);       

     listData$ = this.listData .asObservable();

 }

将 ListStateService 注入 NewListMenuComponent

在 onSubmit 中，更新后，

 const lists = this.listService.updateLists(newListObj);

    this.listData .next(lists );

将 ListStateService 注入 SubHeaderComponent 在 ngOnInit() 中，订阅 ListStateService.listData$，在这里您将获得更改的值

Answer 2

在您的服务中，使用事件发射器（非常有用）：

import { EventEmitter } from "@angular/core";

@Output() myEvent: EventEmitter<any> = new EventEmitter();

然后通过您的服务向您的子标题组件发送新数据，如下所示：

emitEvent (newData: Array<string>) {

    this.myEvent.emit({

        data: newData,

    });

}

订阅子标题组件中的新数据ngOnInit并使用它：

this.myService.myEvent.subscribe((newData: Array<string>) => {

    console.log(JSON.stringify(newData.data));

});

注意：如果在组件中不断地重新订阅，订阅会导致内存泄漏，所以您可以保存订阅并unsubscribe()在ngOnDestroy回调中调用它。

Answer 3

有点不清楚您要做什么，但是如果您尝试将数据从父组件传递到子组件，则可以使用 Input 字段或 ViewChild

使用您的父母可能看起来像这样的输入字段：

<app-sub-header [names]="names"></app-sub-header>

然后在孩子中使用“输入”字段。更新父级中的名称应实时更新子级中相同的命名变量。