<路由器-出口>是显示和整个页面，即使没有调用

Question

我正在做一个博客项目，在角度路由方面没有经验，但是，我很确定这是不应该发生的。当我将我的页面放在主组件或home.component.html中时，它会再次显示页面，这样我的页面就像两个版本的页面一样。告诉我是否需要包括更多的东西

编辑:我尝试给路由器出入口一个名称，它似乎解决了当前的问题，但是每当我试图进入/articles时，它就会重定向回主页。

app.component.html

<div class="app-component">
  <nav>
<div class="logo">
  <img class="home-button" src="./assets/images/3d-printer.png" alt="home button">
</div>
<ul class="nav-links">
  <li><a routerLink="/" routerLinkActive="active" (click)="toggle()">blog page</a></li>
  <li><a routerLink="/articles" routerLinkActive="active">all articles</a></li>
  <li>contact</li>
</ul>
<div class="logo">
  <h4>logo</h4>
</div>
</nav>
<div class="title-container">
  <div class="title">
    My blog about things
  </div>
</div>

<app-home></app-home>
<router-outlet></router-outlet>

<div class="footer">
  <a href="https://www.flaticon.com/free-icons/3d-printing" title="3d printing icons">3d printing icons created by
    Freepik - Flaticon</a>
</div>

app-routing.module.ts

const routes: Routes = [
  {
      path: '',
      component: AppComponent,
  },
  {
      path: 'timeline',
      component: TimelineComponent,
  },
{
    path: 'article',
    component: articleComponent,
},
{
    path: 'allarticles',
    component: AllarticlesComponent,
},

{
    path: '**',
    redirectTo: '/'
}
];
  
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

我在ts文件中链接到/articles。

Answer 1

将AppComponent组件作为默认的''路由列出。因此，它基本上是在其内部呈现AppComponent，从而重复AppHome组件。

为了缓解这种情况，您可以从您的<app-home>模板中删除AppComponent组件，而是通过路由器呈现它：

app.component.html

<app-home></app-home> <-- DELETE THIS
<router-outlet></router-outlet>

app-routing.module.ts

  {
      path: '',
      component: HomeComponent, // <-- Instead of AppComponent
  },