如何使用角度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中的路由正確導航頁面？

回答

相關問題