Angular 4按鈕鏈接到LazyLoading模塊路由不工作

我有一個按鈕與一個延遲加載模塊的routerLink指令。但鏈接不起作用。當它被加載到瀏覽器地址欄中（當點擊按鈕時）組件永遠不會被加載，並且在控制檯中我得到一個404錯誤。我究竟做錯了什麼。Angular 4按鈕鏈接到LazyLoading模塊路由不工作

我想要實現的功能是：當我去/事件/ 5獲取填充表單（來自ID = 5的事件編輯/更新），而當我去/事件/新獲得一個空形式插入新的事件。

我想這個問題可能在IncidentsRoutingModule中，但是我無法工作。

我的主要應用路由模塊如下：

const appRoutes: Routes = [ 
    { path: '', redirectTo:'home', pathMatch:'full'}, 
    { path: 'home', component: HomeComponent }, 
    { path: 'incidents', loadChildren : 'app/incidents/incidents.module#IncidentsModule' }, 
    { path: 'patients', loadChildren: 'app/patients/patients.module#PatientsModule' }, 
    { path: 'doctors', loadChildren: 'app/doctors/doctors.module#DoctorsModule' }, 
    { path: 'clinics', loadChildren: 'app/clinics/clinics.module#ClinicsModule' }, 
    { path: 'search', component: SearchComponent }, 
    { path: '**', component: PageNotFoundComponent } 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules }) 
    ], 
    exports: [RouterModule] 
}) 

export class AppRoutingModule {}

的IncidentsModule是：

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    IncidentsRoutingModule 
    ], 
    declarations: [ 
    IncidentsComponent, 
    IncidentDetailsComponent, 
    IncidentsListComponent 
    ], 
    providers:[IncidentsService] 
}) 
export class IncidentsModule { }

的IncidentsRoutingModule是：

const incidentsModuleRoutes: Routes = [ 
    { 
    path: '', 
    component: IncidentsComponent, 
    children: [ 
     { 
     path: '', component: IncidentsListComponent, 
     children: [ 
      { 
      path:':id', component: IncidentDetailsComponent 
      }, 

      { 
      path: 'new', component: IncidentDetailsComponent 
      } 
     ] 
     } 
    ] 
    } 
]; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    RouterModule.forChild(incidentsModuleRoutes) 
    ], 
    exports: [RouterModule] 
}) 
export class IncidentsRoutingModule { }

我IncidentsComponent具有帶有按鈕一個不起作用的routerLink指令。貝婁是我IncidentsComponent：

@Component({ 
    // selector: 'app-incidents', 
    template: ` 
    <div class="container-fluid"> 
     <h3 style="margin:20px 20px 0px 20px;">Περιστατικά</h3> 
     <button type="button" class="btn btn-outline-primary" style="margin: 20px" routerLink="/incidents/new"> 
     <i class="fa fa-plus-circle" style="margin-right: 10px"></i> 
     Νέο Περιστατικό 
     </button> 
     <router-outlet></router-outlet> 
    </div> 
    `, 
    styleUrls: ['./incidents.component.css'] 
}) 
export class IncidentsComponent { 

    constructor() { 
    } 

}

來源

2017-06-26 mixtou

你是什麼意思不工作？得到錯誤？ –

是404找不到 – mixtou

的問題是，我在IncidentsRoutingModule涉嫌添加useHash: true。我將其更改爲以下內容，並按預期工作。

const incidentsModuleRoutes: Routes = [ 
    { 
    path: '', 
    component: IncidentsComponent, 
    children: [ 
     { 
     path: '', component: IncidentsListComponent, 
     }, 
     { 
     path:':id', component: IncidentDetailsComponent 
     }, 
     { 
     path: 'new', component: IncidentDetailsComponent 
     } 
    ] 
    } 
];

顯然，我所理解的（不知道這是正確的，還沒有發現它或者某處閱讀）是兒童懶加載模塊是指<router-outlet></router-outlet>聲明。

在我的情況下，IncidentsComponent內只有一個 <router-outlet>。因此，所有路徑必須駐留在IncidentsComponent下的子對象中。在其他子組件下添加子對象我認爲只有在這些組件也有<router-outlet>聲明時纔有效我對嗎？？？？

來源

2017-06-26 14:30:01 mixtou

將其更改爲

<button type="button" class="btn btn-outline-primary" style="margin: 20px" routerLink="new"> 
     <i class="fa fa-plus-circle" style="margin-right: 10px"></i> 
     Νέο Περιστατικό 
     </button>

你可以嘗試在你的forRoot方法主要路由模塊

來源

2017-06-26 12:35:20

完全一樣。瀏覽器URL得到更新，但我得到錯誤：無法加載資源：服務器響應404（）的狀態。有任何想法嗎？？ – mixtou

編輯我的答案 –

Angular 4按鈕鏈接到LazyLoading模塊路由不工作

回答

相關問題