Question

我正在开展一个有角度的4项目。我想在点击任何组件时导航到另一个页面

以下是我想要导航到另一个页面的组件。这是我必须导航到详细信息页面的dashboard1页面。

import { ThemeModule } from '../../@theme/theme.module';

import { Component } from '@angular/core';
import { LocalDataSource } from 'ng2-smart-table';
import { NgModule } from '@angular/core';
import { Router } from '@angular/router';
import { RouterModule, Routes } from '@angular/router';

import { Ng2SmartTableModule } from 'ng2-smart-table';
export class Dashboard1Component {

  ..
  ..
  ..
  onEdit(event) {
    console.log(event);
    this.router.navigate(['/details']);
  }
}

在pages-routing.module.ts中我做了如下

import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';

import { PagesComponent } from './pages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { Dashboard1Component } from './dashboard1/dashboard1.component';
import { DetailsComponent } from './details/details.component';

const routes: Routes = [
  { path: '', component: PagesComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent, },
      { path: 'dashboard1', component: Dashboard1Component,},
      { path: 'details', component: DetailsComponent,},
      { path: '', redirectTo: 'dashboard', pathMatch: 'full', }
    ],
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class PagesRoutingModule {
}

在点击编辑时导航到详细信息页面，它将重定向到仪表板页面。任何帮助。

Answer 1

现在它正在重定向到'/ detailscomponent'，我想我们需要一个路由路径：路由器模块中的'/ detailscomponent'，请你检查一下，谢谢。

{path：'detailscomponent'，component：DetailsComponent，}，

Answer 2

你需要有这样的路线：

const routes: Routes = [

  { path: 'detailscomponent', component: DetailsComponent },

];

您无法导航到该组件：

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

Answer 3

详细信息组件的路径路径为details，如路径数组中所示：

path: 'details',
component: DetailsComponent,
}],

但是您要导航到未在路线中定义的detailsComponent。因此

this.router.navigate(['/detailscomponent']);

应改为：

this.router.navigate(['/details']);

角度4的导航问题

3 个答案: