无法在主页中路由

Question

我无法弄清楚app.component.html的路由器出口是如何工作的。

当我加载我的默认页面(http://localhost:4200)时，我希望<app-homepage></app-homepage>在内容部分加载，这是加载良好，但是当我尝试从<app-header></app-header>导航我的菜单时，当router-outlet被调用时，<app-homepage>组件也加载并附加在下面。

我希望主页组件在默认情况下加载，然后当任何菜单组件被调用时，它应该在内容部分加载。

我的代码如下:

    <section class="main" >
          <section class="head_bg">
          <div class="header-nav">
            <app-header></app-header>
          </div>
          </section>
          <section class="content_bg">
            <div class="content">
    <app-homepage></app-homepage>
    <router-outlet></router-outlet>
            </div>
          </section>
          <section class="foot_bg">
          <div class="footer-nav" >
          <app-footer></app-footer>
          </div>
          </section>
    </section>
    
      
    <div class="example-button-row" >
    <a routerLink="/homepage" routerLinkActive="active" button mat-button color="warn">Home</a>
    <a routerLink="/about" routerLinkActive="active" button mat-button color="warn">About Us</a>
    <a routerLink="/gallery" routerLinkActive="active" button mat-button color="warn">Gallery</a>
    <a routerLink="/contactus" routerLinkActive="active" button mat-button color="warn">Contact Us</a>
    </div>
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LeftMenuComponent } from './left-menu/left-menu.component';
import { RightMenuComponent } from './right-menu/right-menu.component';
import { ContentComponent } from './content/content.component';
import { FooterComponent } from './footer/footer.component';
import { HeaderComponent } from './header/header.component';
import { ContactusComponent} from './contactus/contactus.component';
import { GalleryComponent} from './gallery/gallery.component';
import { AboutComponent} from './about/about.component';
 import {HomepageComponent} from './homepage/homepage.component';
const routes: Routes = [
{ path: 'left-menu', component: LeftMenuComponent },
{ path: 'right-menu', component: RightMenuComponent },
{ path: 'content', component: ContentComponent },
{ path: 'footer', component: FooterComponent },
{ path: 'header', component: HeaderComponent },
{ path: 'contactus', component: ContactusComponent },
{ path: 'gallery', component: GalleryComponent},
{ path: 'about', component: AboutComponent},
{ path: 'homepage', component: HomepageComponent },
{ path: '**', redirectTo: '', pathMatch: 'full' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
//export const routingComponents = [LeftMenuComponent,RightMenuComponent]

Answer 1

你需要定义一个空路由，并从html中删除app-component:

{ path: '', component: HomepageComponent },

不要忘记更新到主页的链接，它不是"/homepage"了。