首页 > 解决方案 > 我正在尝试打开一个新选项卡以显示用户的详细信息

问题描述

单击按钮打开一个新窗口选项卡以在角度应用程序中显示详细信息

我能够使用 window.open 功能打开一个新选项卡,但是为了获取详细信息,需要进行 Web 服务调用,我有一个组件已经处理好我想在单击时调用该组件

userHome.html 
   <div id="buttonId">
      <button mat-raised-button (click)="detailsWindow()"  
              [ngClass]="UserDetailClass()"    >User Detail</button>
UserHomeComponent
 (click)="detailsWindow(event) {
//routing logic to get to the component i need to invoke UserDetailComponent
    window.open(url, '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes');
  }
UserDetailComponent
I will be passing id and Flag as params 
ngOnInit() {
    this.userDetailOnLoad= true;
    this.userId = this.data;
    this.statusFlag = this.data.statusFlag;

    this.userDetailService.getUserDetails( this.userId,this.statusFlag).subscribe(
      data => {
        this.userDetails = data;
      }
    );
  }

标签: angular

解决方案


您可以使用 打开一个新选项卡window.open,在其中您可以传递与您匹配的 url,route如下所示:yourComponent/userId

在此路线中,您可以使用一个组件来注意显示数据。

要获取用户的 ID:

constructor(private route: ActivatedRoute);

ngOnInit() {
    const params = route.snapshot.paramMap.get('userId');
}

推荐阅读