当我使用路由器插座时，如何从父级制作子级路由中的空组件

Question

I have a parent route where on click I show content from one child route and in the child route, on click, I fetch different data and I use router-outlet in the parent component's HTML. Now I want to empty the div which was rendered in the child route from the parent ts file based on a condition. Any ideas?

Here is my code

// Here is the caller method
openRoleSection(roleId: string) {
    // Here is the condition, and when it is met, I need to empty the div in the parent route
    if (roleId != this.adminServices.serviceRoleId) {
        alert("yes")
    }
    // Here I am calling the parent routes
    this.router.navigateByUrl(`adminpanel/specific-role-section/${roleId}`, { relativeTo: this.activatedRoute })
}

<!-- I need to empty this div from the child route -->
<div *ngIf="isViewAllEmployeesButtonClicked">
    <div *ngFor="let employee of allUsersFromTheSameRole">
        <p>{{ employee }}</p>
    </div>
</div>

Answer 1

You can pass a query parameter to the child route on navigation, and use to populate/unpopulate specific information in the child component.

See https://angular.io/guide/router#query-parameters-and-fragments for more information

Eg something along the lines of

parent

 const params:{
    roleId: this.adminServices.serviceRoleId
  }
 this.router.navigateByUrl(`adminpanel/specific-role-section/${roleId}` ,  {relativeTo: this.activatedRoute, , queryParams: params})

child

constructor(route:activatedRoute){
this.roleId= this.route
      .queryParamMap
      .pipe(map(params => params.get('roleId') || undefined));
}

<div *ngIf="roleId"></div>