即使我的主頁有一個單獨的組件，我的根組件也會加載兩次。我嘗試使用不同的東西，例如pathMatch，單獨的組件等，但沒有運氣。當我轉到時/dashboard，它作業得很好，但是當它最初加載頁面（根頁面）時，導航欄被加載了兩次。我想避免這種情況。
我的代碼如下所示：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NavbarComponent } from './navbar/navbar.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { RouterModule, Routes } from '@angular/router';
import { RootComponent } from './root/root.component';
import { FeatureDashboardComponent } from '@angular/dashboard';
import { FeatureHomepageComponent } from '@angular/homepage';
const routes: Routes = [
{
path: '',
component: RootComponent,
pathMatch: 'full',
children: [
{
path: '',
component: FeatureHomepageComponent
}
]
},
{
path: 'dashboard',
component: FeatureDashboardComponent
},
{
path: '**',
redirectTo: ''
}
];
@NgModule({
declarations: [
NavbarComponent,
RootComponent
],
imports: [
BrowserModule,
NgbModule,
RouterModule.forRoot(routes)],
providers: [],
bootstrap: [RootComponent],
})
export class AppModule {}
我的 RootComponent 的 HTML 是：
<angular-navbar></angular-navbar>
<div class="layout">
<router-outlet></router-outlet>
</div>
導航欄是：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand">My App</a>
</div>
</nav>
檢查中的示例
uj5u.com熱心網友回復：
而不是呼叫router-outlettry 呼叫確切的組件名稱
uj5u.com熱心網友回復：
這意味著您有兩個之一：另一個<router-outlet></router-outlet>實體，或者您<angular-navbar></angular-navbar>在另一個模板中實體化 ，而不是您在此處顯示的模板。 pathMatch在這里沒有任何關系，因為該<angular-navbar></angular-navbar>組件與路由無關，這意味著它是一個布局組件。
uj5u.com熱心網友回復：
我認為問題可能是您的路由正在''加載，RootComponent而子路由嘗試加載FeatureHomepageComponent但也是''，路由器無法有效解決。
嘗試給子路由一個不為空的路徑，如下所示：
...
{
path: '',
component: RootComponent,
pathMatch: 'full',
children: [
{
path: 'home',
component: FeatureHomepageComponent
}
]
},
...
并在最后使用重定向，因此當您的應用程式加載時，它應該導航到（例如）localhost:4200/home
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/486155.html
標籤：javascript 有角度的 打字稿 角路由器