提交后如何更新选项卡组件

Question

`我有一个使用 Bootstrap JS 选项卡的 Angular 6 应用程序。我的一个标签包含一个笔记列表。用户通过模态弹出窗口添加注释，列表会用新注释刷新。这很好用。但是，在选项卡的标题中，我有一个锚选项卡，反映了输入的注释数量。我的问题是，添加新注释时如何更新该数字？

应用程序是这样安排的：有一个user-details.component.html 显示所有选项卡。注释标签包含在 user-notes.component.html 和 user-notes.component.ts 中（发布在下面）。

例如，这里是user-detail.component.html中一些标签的html：

    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
            <li class="active"><a href="#entitlements" data-toggle="tab" [class.disabled]="isEntitlementTabDisabled">Entitlements</a></li>
            <li><a href="#payment_instruments" data-toggle="tab" style="display: none">Payment Instruments</a></li>
            <li><a href="#notes" data-toggle="tab" >Notes ({{_notes.length}})</a></li>  <!--style="display: none" -->
        </ul>

请注意，“Notes”链接引用了{{_notes.length}}。我需要在发布时更新_notes.length，但我完全不确定如何。有人可以帮忙吗？

编辑：这是我的组件代码：

import { AuthGuard } from '../../service/auth-guard.service';
import { Router } from '@angular/router';
import { Logger } from './../../service/logger.service';
import { Component, OnInit, Input } from '@angular/core';
import { UserDetailService } from '../../user/service/user-detail.service';
import { UserEntitlementService } from '../../user/service/user-entitlement.service';
import { Note } from '../../user/model/note.model';
import { NgForm } from '@angular/forms';


@Component({
    selector: 'app-notes-component',
    templateUrl: './user-notes.component.html'
})

export class UserNotesComponent implements OnInit {
    @Input() asRegIdofUser;

    @Input()
    private notesModel: Note[]=[];
    private actionResult: string;
    private notesCount: number;
    private currentNote: Note;

    constructor(private _logger: Logger, private _userDetailService: UserDetailService, 
        private _router: Router, private _userEntitlementService: UserEntitlementService,
        private authGuard: AuthGuard) {
        }

    ngOnInit(): void {
        //read data....
       this.currentNote= new Note();
       if (this.asRegIdofUser)
           this.refreshNotesData();
    }


    refreshNotesData(){
        this.actionResult='';
         this._userDetailService.getNotes(this.asRegIdofUser).subscribe(
            responseData =>{
                let embedded = JSON.parse(JSON.stringify(responseData));
                let notes = embedded._embedded.note
                this.notesModel=[];
                notes.forEach(note => {
                    this.notesModel.push(note);
                })
                this.notesCount=this.notesModel.length;
            },
            error =>{
                this._logger.error("error on loading notes "+error);
            }
        ) 
        this.currentNote= new Note();
    }

    onCreateNote(notesModal){
        this._userDetailService
             .postNote(this.asRegIdofUser,this.currentNote).subscribe(
           response => {
               if (response==='OK')
                   this.actionResult='success';
               else
                    this.actionResult='failure';
           },error => {
               this.actionResult='failure';
           }
       )
    }

    userHasEditRole(): boolean{
       return this.authGuard.hasAccess('edituserdetails');
    }

    onDelete(noteId: string){
        let deleteNoteId: number = Number.parseInt(noteId);
         this._userDetailService.deleteNote(this.asRegIdofUser,deleteNoteId).
        subscribe(
            response =>{
                if(response == 'OK')                      
                   this.refreshNotesData();
            },
            error =>{
                this._logger.error("error on deleting notes "+error);
            }
        )

    }
}

Answer 1

创建一个DataService，它将拥有您的privatelistOfItems，一个privateBehaviorSubject，可用于通知其他组件有关list的更改，同样，公开为public Observable.

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

@Injectable()
export class DataService {

  private listOfItems: Array<string> = [];
  private list: BehaviorSubject<Array<string>> = new BehaviorSubject<Array<string>>(this.listOfItems);
  public list$: Observable<Array<string>> = this.list.asObservable();

  constructor() { }

  addItemToTheList(newItem: string) {
    this.listOfItems.push(newItem);
    this.list.next(this.listOfItems);
  }

}

在所有三个组件中注入此服务，Header、Add 和 List。并相应地使用它。

这里有一个Working Sample StackBlitz 供您参考。

Answer 2

在这里，您尝试在不同的角度组件之间进行通信。 为此，您可以使用服务或侦听添加注释的组件发出的事件。

您可以在这里找到更多信息：component-interaction