Angular 6调用函数从1个组件到另一个组件但数据没有改变

Posted 2021-04-09

我是Angular 6的新手。我有header component和dashboard component。

在我的header comp中，我有通知弹出窗口，其中包含接受和删除选项的通知列表。

在我的dashboard component中，我有已接受通知的列表。

如果我从标题接受新通知，则应在仪表板中更新列表。

在我的标题组件中，我包括以下内容

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'); 
      }

在仪表板组件中：

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显示结果

我的问题是什么::来自标题的仪表板功能tiggered。它显示了控制台。但是仪表板中的输出没有改变。我错过了什么？

答案

您需要获取列表的Observable，并在html中使用带有ngFor的异步管道来显示列表。此外，您在标头组件中导入仪表板组件的方式也是不好的做法。更好的方法是为列表处理提供服务，并在两个组件中注入服务。

另一答案

您可以使用rxjs主题

首先创建common.service.ts

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

@Injectable()
export class CommonService {

  subject$ = new Subject<any>();

}

然后从你的header.component.ts调用next方法来设置值，

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 演示