angular - Angular 中的 URL 更改后组件不更新

问题描述

我有一个带有显示用户数据的用户页面组件的 Angular 应用程序。除了一件事，一切都很好。当我目前在其他用户身上并按下"My profile"按钮使用Angular RouterLink将我重定向到我的页面（注册用户）时，除了浏览器中的url之外，如果它/user/14变成/user/6了，但组件中的数据在我之前根本没有改变手动重新加载页面。我在布局中使用了 2 个组件 - 第一个是"My profile"按钮所在的导航栏组件，第二个是显示实际用户数据的用户组件。这是导航栏组件的相关 HTML：

<li class="nav-item sub">
  <a class="nav-link unselectable" routerLink="/user/{{user.id}}" routerLinkActive="nav-link-active"> 
    <span class="icon icon-profile"></span> my profile
  </a>
</li>

TS 组件：

import { Component, OnInit } from '@angular/core';
import { Router, RouterLinkActive, RouterLink } from '@angular/router';

import { User } from '@models/user.model';
import { AuthenticationService } from '@services/auth.service';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  user: User;

  constructor(private router: Router, private auth_service: AuthenticationService) {
  }

  ngOnInit() {
    this.dropdown = false;
    // console.log('init_step');
    this.subscr = this.auth_service.currentUser;
    this.auth_service.getUser().subscribe(
      (data) => {
        this.user = data;
      });
  }

  gt_myprofile() {
    let id = this.auth_service.currentUserValue.id
    this.router.navigate([`/user/${id}`]);
    this.auth_service.getUser().subscribe(
      (data) => {
        this.user = data;
      });
  }

}

以及用于用户组件的 HTML：

<div class="container" id="layout">
  <div class="row justify-content">
    <div class="col-xs-12 col-md-5 col-lg-4 no-gutters">
      <app-entity-card-user [user]='user'></app-entity-card-user>
      <!--send/follow-->
      <!--stats-->
      <div class="btn-group container" role="group">
        <button type="button" class="btn btn-group-element" (click)="userFollowers()">
          <p class="btn-group-element-count">
            {{user.followers_count}}
          </p>
          <p class="btn-group-element-name">
            Followers
          </p>
        </button>
        <button type="button" class="btn btn-group-element" (click)="userFollowing()">
          <p class="btn-group-element-count">
            {{user.following_count}}
          </p>
          <p class="btn-group-element-name">
            Followings
          </p>
        </button>
      </div>
    </div>
    <div class="col-xs-12 col-md-5 col-lg-5 no-gutters">
      <!--posting form-->
      <app-post-form *ngIf="owner"></app-post-form>
      <!--switcher-->
      <app-profile-wall [user]="user"></app-profile-wall>
    </div>
    <div class="col-xs-12 col-md-5 col-lg-3 no-gutters">
      <app-speciality [user]="user"></app-speciality>
      <app-skills [user]="user"></app-skills>
    </div>
  </div>
</div>

和 TS 部分：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from "@angular/router";

import { User } from '@models/user.model';
import { AuthenticationService } from '@services/auth.service';
import { FollowersService } from '@services/followers.service';
import { switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  user;
  id;
  followers;
  isFollowing: boolean;
  originUser: boolean = false;
  owner;

  constructor(
    private authenticationService: AuthenticationService,
    private followersService: FollowersService,
    private router: Router,
    private route: ActivatedRoute,
  ) { }

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get("id");
    if (this.id == JSON.parse(localStorage.getItem('currentUser')).id) {
      this.originUser = true;
    } else { console.log('false')}
    this.authenticationService.getSpecUser(this.id).subscribe(
      ((info) => {
        this.user = info;
        if (this.user.id === this.authenticationService.currentUserValue.id){
          this.owner = true;
        } else {
          this.owner = false;
        }
        this.followersService.getFollowing().subscribe(
          data => {
            this.followers = data;
            this.isFollowing = this.followers.some(d => d.id == this.user.id);
          }
        );
      })
    );
  }
}

我知道我应该在这里使用 onDestroy 或 onChange 钩子来实现我需要的结果，但是经过几次尝试后没有任何改变。我也尝试user过从导航栏作为输入传递，但它也没有帮助。任何帮助，将不胜感激。

标签： angular

angular - Angular 中的 URL 更改后组件不更新

问题描述

解决方案

推荐阅读