Как обновить компонент вкладки после отправки - PullRequest
Новая
       9

Как обновить компонент вкладки после отправки

0 голосов
/ 25 июня 2019

`У меня есть приложение Angular 6 с использованием Bootstrap JS Tab. Одна из моих вкладок содержит список заметок. Пользователь добавляет заметку через модальное всплывающее окно, и список обновляется новой заметкой. Это отлично работает. Однако в заголовке вкладки есть вкладка привязки, отражающая количество введенных заметок. У меня вопрос, как можно обновить этот номер при добавлении новой заметки?

Приложение устроено так: есть user-details.component.html, который отображает все вкладки. Вкладка «Примечания» содержится в user-notes.component.html, а user-notes.component.ts (размещено ниже).

Например, вот HTML-код некоторых вкладок в user-detail.component.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);
            }
        )

    }
}

Ответы [ 2 ]

0 голосов
/ 25 июня 2019

Создайте 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. И используйте его соответственно.

Вот Рабочий образец StackBlitz для вашей ссылки.

0 голосов
/ 25 июня 2019

Здесь вы пытаетесь общаться между различными угловыми компонентами.Для этого вы можете использовать службу или прослушать событие, генерируемое компонентом, который добавляет примечание.

Более подробную информацию можно найти здесь: компонент-взаимодействие

...