如何防止 Angular 两次加载组件？

Question

我的 Angular 应用程序加载组件两次。最初，我<router-outlet></router-outlet>在组件的模板中使用了它，它工作正常，但仍然出现以下错误：

\n\n

core.umd.js:3257 EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'\ncore.umd.js:3262 ORIGINAL STACKTRACE:\ncore.umd.js:3263 Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'\nzone.js:355 Unhandled Promise rejection: Cannot find primary outlet to load 'AppComponent' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find primary outlet to load 'AppComponent'(\xe2\x80\xa6) Error: Cannot find primary outlet to load 'AppComponent' \nzone.js:357 Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'\n

\n\n

为了解决这些错误，我将其添加<router-outlet></router-outlet>到我的模板中。但现在我的应用程序正在加载我的组件两次。

\n\n

应用程序组件.ts

\n\n

import { Component } from '@angular/core';\n\n@Component({\nmoduleId: module.id\n  selector:'body', \n  templateUrl: 'app.component.html', \n  styleUrls: ['app.component.css']\n})\n\nexport class AppComponent {\n  title = 'Doctor Application';\n}\n

\n\n

应用程序路由.module.ts

\n\n

import { NgModule }             from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\n\nimport { AppComponent }   from './app.component';\n\nconst routes: Routes = [\n  { path: '', component: AppComponent  },\n];\n\n@NgModule({\n  imports: [ RouterModule.forRoot(routes) ],\n  exports: [ RouterModule ]\n})\n\nexport class AppRoutingModule {}\n

\n\n

应用程序组件.html

\n\n

<h1>{{title}}</h1>\n<router-outlet></router-outlet>\n

\n

Answer 1

不AppComponent应该是路由的一部分。它用于引导。这就是错误的原因。您正在尝试将其添加AppComponent到路由中，但没有<router-outlet>它，因为它是顶级组件。