Question

`我有一个使用Bootstrap JS Tab的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.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

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

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

Answer 2

创建一个DataService，它将拥有您的private listOfItems和一个private BehaviorSubject，可用于通知其他组件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。

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

2 个答案: