Angular `<router-outlet>` 显示模板两次

Posted 2023-02-22

【中文标题】Angular `<router-outlet>` 显示模板两次

【英文标题】：Angular `<router-outlet>` displays template twice

【发布时间】：2017-09-17 04:46:39

【问题描述】：

我正在使用 angular4 并尝试创建路由器链接。路由器链接工作，但显示模板两次。

下面是我在组件中的代码：

import  Component  from '@angular/core';
import  Router, ActivatedRoute  from '@angular/router';

@Component(
  selector: 'app-root',
  template: `
  <h1>Contacts App</h1>
    <ul>
      <li><a [routerLink]="['/facebook/top']">Contact List</a></li>
    </ul>
    <router-outlet></router-outlet>
    `
)
export class AppComponent 
    constructor(
        private route: ActivatedRoute,
        private router: Router,
    ) 

    gotoDetail(): void 
        this.router.navigate(['facebook/top']);
    

我的路线：

const routes: Routes = [
   path: '', component: AppComponent ,
   path: 'facebook/top',  component: CommentComponent ,
];

@NgModule(
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
)
export class AppRoutingModule 

【参考方案1】：

在你的 app-routing.module.ts 文件中尝试使用：

path: '' , redirectTo: 'AppComponent', pathMatch: 'full'

代替：

 path: '', component: AppComponent, pathMatch: 'full' 

【参考方案2】：

您的默认路由指向AppComponent，因此您的路由在AppComponent 内呈现AppComponent。

为此创建DashboardComponent 或HomeComponent。然后做：

 path: '', component: DashboardComponent 

更新 1：

正如@GünterZöchbauer 提到的，我们应该为“没有孩子的空路径路径”添加pathMatch: 'full'。。

所以我们可以使用AppComponent 方法（检查Günter's answer）：

 path: '', component: AppComponent, pathMatch: 'full' 

或者，我在上面的回答中提到的DashboardComponent 方法。

【讨论】：

@kevinabraham 没问题，总是乐于提供帮助！

或使用重定向到路径

嘿！我遇到了同样的问题，并试图为此创建单独的组件： path: '', component: AppComponent, pathMatch: 'full' , path: 'home', component: HomeComponent ，但仍然是重复的

【参考方案3】：

为什么会这样？

1) 在您的应用程序入口点，很可能是main.ts，可以看到这一行：

platformBrowserDynamic().bootstrapModule(AppModule);

这告诉 Angular 引导模块 AppModule

2) 在AppModule中，可以找到这一行：

bootstrap: [ AppComponent ]

这告诉 Angular 引导组件 AppComponent。这就是为什么您会看到第一个 Contacts App 部分，因为 AppComponent 的 html 模板是：

<h1>Contacts App</h1>
<ul>
    <li><a [routerLink]="['/facebook/top']">Contact List</a></li>
</ul>
<router-outlet></router-outlet>

3) 但是，AppComponent 的模板也包含<router-outlet>。路由器读取路由配置，相应地创建 AppComponent 的新实例并将其注入元素 <router-outlet> 之后。这就是为什么您会看到第二个 Contacts App 部分。

【讨论】：

感谢迈克尔的解释，让问题更清楚了

感谢您的解释。

这太棒了！应该与标记的答案融合在一起

【参考方案4】：

如果您有一个没有子节点的空路径路由，请使用pathMatch: 'full'

而不是

 path: '', component: AppComponent ,

使用

 path: '', component: AppComponent, pathMatch: 'full' ,

以及@SrAxi 所说的话。

【讨论】：

征得您的许可，我将此添加到我的答案中以使其更完整，显然我标记了您并提到了您。

@SrAxi 当然 :) .