Question

我有一个成员列表页面，其中显示了具有其名称和个人资料图片的成员。如果我单击任何一个成员，那么它将转到具有用户ID的另一个页面并显示用户信息。我使用视图解析器来获取用户该用户ID的数据

还有一个用于查看当前登录用户配置文件的按钮。我使用了具有当前用户ID的页面来显示该用户信息。

在此页面中，我添加了子页面以显示用户照片，视频等。这些是页面/

<app-member-info [user]="user"></app-member-info>
<app-photo-card [user]="user" (getMemberPhotoChange)="updateMainPhoto($event)"></app-photo-card>
<app-photo-album-list [user]="user"> </app-photo-album-list>
<app-video-editor [videos]="user.videos" [user]="user"></app-video-editor>

这些要传递该视图解析器的页面将返回用户对象。

我的问题是，如果我从会员列表中查看会员详细信息，则显示该用户的所有信息。之后，如果单击当前用户查看配置文件按钮，则无法获取当前用户的详细信息以显示照片和视频。此页面数据

 <app-member-info [user]="user"></app-member-info>

这是我的成员详细信息页面的html代码

    <div class="container mt-4">

  <div class="row">
   <div class="col-sm-12">
      <div class="tab-panel">
        <tabset [justified]="true" >
          <tab heading="About {{user?.firstName}}">
            <app-member-info [user]="user"></app-member-info>
          </tab>
         <tab heading="Photos">
            <div *ngIf="authService.currentUser && authService.currentUser.id == user.id" class="row  mb-1">
              <div class="col-md-12">
                <button type="button" title="Upload Photos" class="btn btn-default pull-right upload-img-btn" (click)="openModal(template)">Upload Photos</button>
              </div>

            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="tab-panel">
                  <tabset class="member-tabset">
                    <tab *ngIf="authService.currentUser && authService.currentUser.id == user.id" heading="Your Photos">
                      <app-photo-card [user]="user" (getMemberPhotoChange)="updateMainPhoto($event)"></app-photo-card>
                    </tab>
                    <tab *ngIf="(authService.currentUser && authService.currentUser.id != user.id) || authService.currentUser == undefined" heading="{{user.userName}}'s Photos'">
                      <app-photo-card [user]="user" (getMemberPhotoChange)="updateMainPhoto($event)"></app-photo-card>
                    </tab>

                    <tab heading="Photo Albums">
                      <app-photo-album-list [user]="user"> </app-photo-album-list>
                    </tab>


                  </tabset>
                </div>

              </div>
            </div>
          </tab>
          <tab heading="Videos">
              <app-video-editor [videos]="user.videos" [user]="user"></app-video-editor>
             </tab>
          <tab heading="Recommendations">
            <app-recommendations [toRecommendUser]="user"></app-recommendations>
          </tab>
        </tabset>
      </div>
    </div>
  </div>
</div>

这是成员详细信息页面的打字稿代码

export class MemberDetailsComponent implements OnInit {
  user: User;


  constructor(
    private router: Router, private modalService: BsModalService) {

  }

  ngOnInit() {

    this.route.data.subscribe(data => {
      this.user = data['user'];
    }); }}

更新：这是视图解析器代码

@Injectable()
export class MemberDetailsResolver implements Resolve<User> {
    values$: any;
    constructor(private userService: UserService,
        private router: Router, private alertify: AlertifyService) { }

    resolve(route: ActivatedRouteSnapshot): Observable<User> {
        return this.userService.getUser(route.params['id']).pipe(
            catchError(error => {
                this.alertify.error('Problem retrieving user details');
                this.router.navigate(['/members']);
                return of(null);
            })
        );
    }


}

能否请您告诉我如何解决此问题？我想在不刷新页面的情况下执行此操作。谢谢

使用@Input（）进行组件通信在angular7

0 个答案: