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

Question

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

应用程序安排如下：有一个 user-details.component.html 显示所有选项卡。注释选项卡包含在 inn user-notes.component.html 中，并且有一个 user-notes.component.ts（post 编辑在下方）。

例如，这是 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" link 引用了 {{_notes.length}}。我需要在 post 时更新 _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

此处您正在尝试在不同的 angular 组件之间进行通信。为此，您可以使用服务或监听从添加注释的组件发出的事件。

您可以在此处找到更多信息：component-interaction

Answer 2

创建一个 DataService，它将拥有您的 private listOfItems，一个 private BehaviorSubject，可用于通知其他组件有关 [=15] 中的更改=] 一样，暴露为 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。并相应地使用它。

Here's a Working Sample StackBlitz for your ref.

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

How to update tab component after submit

javascript

angular-ui-bootstrap

angular