Angular 6 вызывает функцию от одного компонента к другому, но данные не изменены

Question

Я новичок в Angular 6. У меня есть header component и dashboard component.

В моем header comp у меня всплывающее окно со списком уведомлений с опциями принять и удалить.

В моем dashboard component есть список принятых уведомлений.

Если я принимаю новое уведомление из заголовка, список должен обновляться на панели инструментов.

В моем компоненте заголовка есть flowwing

import { DashboardComponent } from '../../pages/dashboard/dashboard.component';

// Включен компонент панели мониторинга в качестве поставщика

@Component({
  selector: 'app-siteheader',
  providers:[DashboardComponent ],
  templateUrl: './siteheader.component.html',
  styleUrls: ['./siteheader.component.css']
})

// В конструкторе под названием dashcomp

 constructor( private dashcomp: DashboardComponent, private dashboardservice: DashboardService, private authenticationService: AuthenticationService) { }

// уведомить принять действие

actionaccept(id){

    this.authenticationService.acceptaction(id)
            .subscribe(
                data => {  


// caled the dashboard function

                   this.loaddashboard();
                }
            );

  }

// с помощью этой функции, называемой функцией компонента панели мониторинга.

 public loaddashboard() {
        console.log('called');
        this.dashcomp.dolist('future'); 
      }

В компоненте Dashboard:

dolist(type) {
    console.log('dasss');
     this.dashservice.listengagement(type,this.page,this.limit)
            .subscribe(
                data => {    
                  console.log(data);
                   this.futureloader = false;
                   this.futurelist = data['result']; 
                   this.futuretotal = data['count'];

                }
            );
  }

В html панели инструментов результат отображается с помощью ngfor

В чем моя проблема: из заголовка сработала функция панели мониторинга. Это показывает консоль. Но вывод не изменился в приборной панели. Я что-то упустил ??

Answer 1

Вы можете использовать rxjs Тема

первое создание common.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class CommonService {

  subject$ = new Subject<any>();

}

затем из вашего header.component.ts вызова следующий метод для установки значения,

constructor(private commonService: CommonService) { }

loaddashboard() {
    console.log('called');
    this.commonService.subject$.next('future');
  } 

и в dashboard.component.ts подписаться на это событие

constructor(private commonService: CommonService) { }

  ngOnInit() {

    this.commonService.subject$.subscribe(data =>{
      console.log('response from header is => ',data);
    });
  }

вот Stackblitz демо

Answer 2

Вам нужно получить Observable из вашего списка и использовать асинхронный канал с ngFor в html, чтобы показать список. Также плохой способ - импортировать компонент панели мониторинга в компонент заголовка. Лучший способ - создать службу для обработки списка и внедрить службу в обоих компонентах.