Angular 组件没有'；在URL中的URL更改后无法更新

我有一个带有用户页面组件的Angular应用程序，可以显示用户数据。除了一件事，一切都很好。当我当前在某个其他用户上，按下

“我的个人资料”

按钮，使用角度路由器链接将我重定向到我的页面（注册用户），除了浏览器中的url之外，其他内容都不会改变，如果是

/user/14

，它将变为

/user/6

，但在我手动重新加载页面之前，组件中的数据根本不会改变。我在布局中使用了两个组件-第一个是导航栏组件，其中“我的配置文件”按钮位于此位置，第二个是显示实际用户数据的用户组件。以下是导航栏组件的相关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>

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

}

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

和用户组件的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>

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

}

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

---

我知道我应该在这里使用onDestroy或onChange钩子来实现我需要的结果，但经过几次尝试后，一切都没有改变。我还尝试将

用户

作为输入从导航栏传递，但也没有帮助。任何帮助都将不胜感激。

您正在访问快照，因此id不会更新

如果订阅activatedRoute的

paramMap

，则id将更改：

this.route.paramMap.subscribe(params => {
  this.id = this.route.snapshot.paramMap.get("id");
  // do the rest here...
});

---

您正在访问快照，因此id不会更新

如果订阅activatedRoute的

paramMap

，则id将更改：

this.route.paramMap.subscribe(params => {
  this.id = this.route.snapshot.paramMap.get("id");
  // do the rest here...
});

---

你能在app.module中显示路由器路径代码吗，因为当我重新加载页面数据并更改浏览器中的url时，您是否在控制台中没有收到任何错误？您正在尝试重定向到其他组件，或者只是更改

id

我在控制台中没有收到任何错误，也没有尝试重定向到其他组件，只需更改

id

，我的目标是在不重新加载的情况下检索新数据并更新页面。你能在app.module

path:'user/:id'，component:UserComponent

中显示路由器路径代码吗，因为当我重新加载页面数据并更改浏览器中的url时，您是否在控制台中没有收到任何错误？您正在尝试重定向到其他组件，或者只是更改

id

我在控制台中没有收到任何错误，也没有尝试重定向到其他组件，只需更改

id

，我的目标是检索新数据并更新页面，而无需重新加载