在 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&nbsp;export class ListStateService {&nbsp; &nbsp; &nbsp;private listData = new BehaviorSubject<NewList >({} as NewList);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;listData$ = this.listData .asObservable();&nbsp;}将 ListStateService 注入 NewListMenuComponent在 onSubmit 中，更新后，&nbsp;const lists = this.listService.updateLists(newListObj);&nbsp; &nbsp; 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>) {&nbsp; &nbsp; this.myEvent.emit({&nbsp; &nbsp; &nbsp; &nbsp; data: newData,&nbsp; &nbsp; });}订阅子标题组件中的新数据ngOnInit并使用它：this.myService.myEvent.subscribe((newData: Array<string>) => {&nbsp; &nbsp; console.log(JSON.stringify(newData.data));});注意：如果在组件中不断地重新订阅，订阅会导致内存泄漏，所以您可以保存订阅并unsubscribe()在ngOnDestroy回调中调用它。

Answer 3

有点不清楚您要做什么，但是如果您尝试将数据从父组件传递到子组件，则可以使用 Input 字段或 ViewChild使用您的父母可能看起来像这样的输入字段：<app-sub-header&nbsp;[names]="names"></app-sub-header>然后在孩子中使用“输入”字段。更新父级中的名称应实时更新子级中相同的命名变量。