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

'app.routing.ts'文件如何使用角度4中的路由正确导航页面？

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 {}

'全layout.component.html'文件

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

我想通过单击链接重定向到UploadFile.component.html 。尽管此重定向正在工作，但是此页面中未加载布局（主页），因此我认为它仅在此页面上重定向。我从侧栏菜单中引用此页面，但在重定向显示后，只会打开“UploadFile”页面，但它不会在此页面中加载布局。

来源

2017-07-24 LGB

尝试routerLink = “/ UploadFile”

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

和使用小写路线

来源

2017-07-24 14:00:41 FierceDev

仍然不工作.. – LGB

您使用小写路线？路径：'uploadfile'和routerLink =“/ uploadfile” – FierceDev

在你的问题中添加UploadFileComponent ts代码 – FierceDev

我会把它改成这样：

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'属性中给出的路径。

来源

2017-07-24 14:10:36

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

回答

相关问题