Question

我的路线：

/dashboard
/dashboard/view-all
/dashboard/edit/:id

基本上，我在/dashboard/view-all中有一个表，并且对于每一行，都有一个“编辑”按钮可将我带到/dashboard/edit/:id，并且工作正常。

问题：根据动态路由器，我无法显示/隐藏EditComponent。我通常使用类似以下所示的东西来显示/隐藏基于Router的Angular组件：

<app-view-all *ngIf="route.url == '/dashboard/view-all'"></app-view-all>

对于动态路由器，当我尝试将其编写为：

<app-edit *ngIf="route.url == '/dashboard/edit/:id'"></app-edit>

它不起作用，但是当我将其更改为类似/dashboard/edit/26时它起作用。我是Angular的新手，我没有在SOF上找到如此重复的问题，也许这是一个非常基本的Angular问题？：D

谢谢！

Answer 1

我已经使用indexOf JavaScript方法解决了这个问题，并且认为这是一个很棘手的解决方案：

<app-edit *ngIf="route.url.indexOf('/dashboard/edit/') >= 0" ></app-edit>

如果路径具有true部分，则返回/dashboard/edit/，否则，返回false。

我确实想知道；有更好的常规解决方案吗？

Answer 2

您的路由配置应类似于

{
  path: 'dashboard',
  component: DashboardComponent,
},
{
  path: 'dashboard/:section',
  component: DashBoardComponent
},
{
  path: 'dashboard/:section/:id',
  component: DashBoardComponent
}

在Dashboard.component.ts

public isEditing = false;
public editId;
constructor(private route: ActivatedRoute){}

ngOnInit() {
   this.route.params.subscribe((param) => {
       isEditing = param.section==='edit';
       editId = param.id;
   });
}

在dashboard.component.html

中

<app-view-all *ngIf="!isEditing"></app-view-all>

<app-edit *ngIf="isEditing"></app-edit>

显示基于动态角路由路径的特定组件

2 个答案: