Question

我有一个父级路由，在单击时，我显示一个子路由的内容，在子级路由中，单击时，我获取不同的数据，并在父组件的HTML中使用router-outlet。现在，我想根据条件从父ts文件中清空在子路由中呈现的div。有什么想法吗？

这是我的代码

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

您可以在导航时将查询参数传递给子路径，并用于填充/取消填充子组件中的特定信息。

有关更多信息，请参见https://angular.io/guide/router#query-parameters-and-fragments

例如

父母

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

孩子

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

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

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

1 个答案: