Angular function not firing upon route change

Here are my codes:

• profile.component.html

<ng-container *ngFor="let item of profile">
...
</ng-container>

<app-content [content]="content"></app-content>

<app-content [content]="content"></app-content> is my main page (content.component).

• profile.component.ts

ngOnInit(): void {
    this.route.params.subscribe((params: Params) => {
      this.profId = +params['id'];

      this.getUser();
      this.getUserContent();
    });
}

getUser() {}
getUserContent() {}

• content.component.html (the link to navigate to user’s profile page)

<span class="name bold-text" [routerLink]="['/profile', item.author_id]">
     {{ item.username }}
</span>

I am using Angular 18. When I navigate from main page to profile page by clicking user 1, it will load user 1’s profile information and content posted. However, when I click on user 2 FROM user 1’s profile, it only load user 2’s profile information but not the content posted. Further troubleshooting reveals that this.getUser() fired, but not this.getUserContent().