Question

'app.routing.ts'文件

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

//Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';

//pages
import { DashboardComponent } from './pages/dashboard.component'
import { UploadFileComponent } from './pages/UploadFile.component'


export const routes: Routes = [
  {
    path: '',
    redirectTo: 'full-layout',
    pathMatch: 'full',
  },
  {
    path: '',
    component: FullLayoutComponent,
    data: {
      title: 'Dashboard'
    }
  },
   {
    path: 'UploadFile',
    component: UploadFileComponent,
    data: {
      title: 'UploadFile'
    }
  },
];

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

'full-layout.component.html'文件

<a class="nav-link" routerLinkActive="active" [routerLink]="['UploadFile']">
  <i class="icon-star"></i> Upload
</a>

我想通过点击链接重定向到UploadFile.component.html。虽然这个重定向工作正常，但是在这个页面中没有加载布局（主页面）所以我认为它只在这个页面上重定向。我从侧栏菜单引用此页面，但在重定向显示后，只会打开“UploadFile”页面，但不会在此页面中加载布局。

Answer 1

尝试routerLink =“/ UploadFile”

<a class="nav-link" routerLinkActive="active" routerLink="/UploadFile"><i class="icon-star"></i> Upload</a

并使用小写路线

Answer 2

我会改为：

export const routes: Routes = [
  {
    path: 'uploadfile',
    component: UploadFileComponent,
    data: {
      title: 'UploadFile'
    }
  },
  {
    path: 'full-layout',
    component: FullLayoutComponent,
    data: {
      title: 'Dashboard'
    }
  },
  {
    path: '',
    redirectTo: 'full-layout',
    pathMatch: 'full',
  },
];

请注意路线的顺序。路由器执行与当前路由匹配的第一条路由。这就是您不应该使用path: ''路由的原因。

redirectTo: 'foo'属性重定向到path: 'foo'属性中指定的路径。

如何使用角度4中的路由正确导航页面？

2 个答案: