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

Question

'app.routing.ts' File

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' File

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

I want to redirect to UploadFile.component.html by clicking a link. Though this redirection is working, but layout(master-page) is not loaded in this page so I think it is redirecting only on this page. I'm referencing this page from side-bar menu but after redirection display only 'UploadFile' page will open but it will not load layout in this page.

Answer 1

Try routerLink="/UploadFile"

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

and use lowercase routes

Answer 2

I would change it to this:

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',
  },
];

Please note the order of your routes. The router executes the first route which matches the current route. This is the reason why you shouldn't have to routes with path: '' .

The redirectTo: 'foo' property redirects to the path that is given in the path: 'foo' property.