路由器导航不会重定向到其他页面答案

【问题标题】：router navigate doesn't redirect to other page路由器导航不会重定向到其他页面
【发布时间】：2018-11-17 08:12:00
【问题描述】：

当他点击数据表行时，我会将用户重定向到另一个页面

在 HTML

中

<p-table  [value]="users" selectionMode="single"  [(selection)]="selectedUser" dataKey="uid" (onRowSelect)="selectedUserDetails($event)" styleClass="tab-result">

在 TS 文件中

selectedUserDetails(userDetails) {
   console.log(userDetails);
   console.log("enterhere"); // is printed on console dev
   this.router.navigate['/userdetails'];
}

在模块路由

const routes: Routes = [
  {
    path: "",
    component: AdministrationComponent,
    children: [
      { path: "", component: ResulTabComponent, pathMatch: "full" },
      { path: "userdetails", component: UserDisplayComponent }
    ]
  }
];

有关信息管理路由在此路径上延迟加载http://localhost:4200/administration

用户详细信息应为http://localhost:4200/administration/userdetails

在管理组件中

<router-outlet></router-outlet>

我的问题是，单击时我没有被重定向到 userdetails 页面，但是当我从 url 栏导航到 /userdails 时，我看到了组件

【问题讨论】：

或者你也可以试试这个this.router.navigateByUrl('/userdetails');
试试这个this.router.navigate(['userdetails']);

标签： angular typescript angular-routing

【解决方案1】：

您还没有调用该函数，您只是尝试访问navigate 属性中名称为/userdetails 的属性。你错过了()

this.router.navigate(['/userdetails']);
                    ^                ^

【讨论】：

只是，我又收到了一个问题ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'userdetails' ，但我已经定义了路线
在控制台中尝试查看它正在尝试导航的路线？
该错误与您没有在应用程序中配置路由的事实有关。请检查如何在 Angular 中配置应用程序路由。您必须声明您声明的 appRoutes，然后您必须导出： export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);然后在imports下的AppModule中导入路由。查看有关如何设置应用程序路由的文档。
这就是我所做的，当我从浏览器导航 tu userdetails 时，我登陆组件 userdetails，因此路由声明正在工作，只有导航会导致问题

【解决方案2】：

添加括号“()”并删除斜杠“/”

this.router.navigate(['userdetails']);

尝试如下路由：

const routes: Routes = [
  { path: '', component: ResulTabComponent },
  { path: "administration/userdetails", component: UserDisplayComponent }
]

【讨论】：

我应该删除父路径上的子属性吗？（我在帖子中更新了路线部分）
试试这个： const routes: Routes = [ { path: '', component: ResulTabComponent }, { path: "userdetails", component: UserDisplayComponent } ]
但我没有在您的示例中看到管理组件。 userdetails 和 result 选项卡应该是它的孩子
在“userdetails”前添加管理（administration/userdetails）{ path: "administration/userdetails", component: UserDisplayComponent }