Angular 9：延遲加載組件內的子路由不起作用

Question

我有應用程序組件，我在其中延遲加載帶有組件 profilecomponent 的 create-new-module。 現在在配置文件組件中，我點擊 router.navigate 並嘗試加載另一個子項詳細信息來代替配置文件，但它不起作用，控制台中也沒有錯誤。

請幫忙

 // App component route const routes: Routes = [ { path: 'create-new-emp', loadChildren: () => import('./create-new-emp/create-new-emp.module').then(c => c.CreateNewEmpModule), }, { path: '', redirectTo: 'create-new-emp', pathMatch: 'full'}, { path: '**', redirectTo: 'create-new-emp'} ]; // Emp Module Route const routes: Routes = [ { path: '', component: ContainerComponent, children: [ { path: '', component: ProfileComponent, outlet: 'form'}, { path: 'profile', component: ProfileComponent, outlet: 'form'}, { path: 'detail', component: DetailComponent, outlet: 'form' }] } ]; // Trying to hit below link but not working this.router.navigate(['detail'])

 <app-component> <router-outlet> <container-component> <profile-component></profile-component> </container-component> </router-outlet> </app-component>

Answer 1

復雜的只有這些信息來幫助。 但是 angular 導航數量組件/頁面的方式。 我認為您要做的是在組件之間導航（根據您的 router.ts）。 如果您想導航，您只需要在 html 代碼中使用路由器插座，而不是在 HTML 代碼中使用組件標簽。

改變這個：

<app-component>
<router-outlet>
<container-component>
<profile-component></profile-component>
</container-component>
</router-outlet>
</app-component>

對此：

<app-component>
<router-outlet>
</router-outlet>
</app-component>

然后，進入 ContainerComponent.html 您需要重復導航到配置文件的詳細信息，因為這些是子路由。

<router-outlet></router-outlet>

這將為您提供有關所需內容的更多信息。

Answer 2

這個信息很難說，但可能......你應該定義路由器出口名稱

<router-outlet  name="form"></router-outlet>

希望有幫助。