Связь компонента с помощью @Input () не работает в angular7 - PullRequest
0 голосов
/ 22 января 2019

У меня есть страница со списком участников, на которой отображаются участники с их именами и фотографией профиля. Если я щелкаю по любому из участников, он направляется на другую страницу с идентификатором пользователя и отображает информацию о пользователе. Я использовал для разрешения пользователя view resolverданные этого пользователя 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);
            })
        );
    }


}

Подскажите, пожалуйста, как решить эту проблему?Я хочу сделать это без обновления страницы. Если я обновляю страницу, она работает, спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...