角度路由选择器“app-home”与元素不匹配

问题描述

我想防止我的初始组件被加载两次。我正在尝试使用默认/空组件来避免 AppComponent 与 AppComponent 一起加载空组件将是起点，在用户命令中加载其他组件。

我仍在研究 Angular Routing，但据我了解，路由器出口在模块中动态加载，默认情况下总是从 AppComponent 开始？

我认为通过设置一个空的 Homecomponent 会破坏 AppComponent 循环

我做错了什么？这是与问题相关的所有代码吗？

我的 Index.html

<!DOCTYPE html>
  <html lang="en">
    <head>
      <Meta charset="utf-8" />          
      <base href="/" />
      <Meta name="viewport" content="width=device-width,initial-scale=1" />   
    </head>
    <body>
      <app-root>
         Loading...
      </app-root>
    </body>
</html>

我的 app.component.html

<app-nav-menu></app-nav-menu>    //navigation that is always shown
<router-outlet></router-outlet>

应用路由：

const routes: Routes = [
  { path: 'home',component: HomeComponent },{ path: '',redirectTo: 'home',pathMatch: 'full' }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes),HomeModule,AccountModule,OtherModules
  ],exports: [RouterModule]
})
export class AppRoutingModule { }

我的 home.html 只是一个空的 html 文件

我的家庭模块

@NgModule({
  declarations: [    
  ],imports: [
    CommonModule,RouterModule.forChild([  
       { path: 'Feed',loadChildren: () => import('./../home/Feed/Feed.module')
                                .then(x => x.FeedModule)},{ path: 'search',loadChildren: () => import('./../home/searchresults/search.module')
                                .then(x => x.SearchModule)}  

    ]),SharedModule,OtherModules    
  ],exports: [
    CommonModule,RouterModule,OtherModules     
  ],providers: [
    LoginService
  ]
})
export class HomeModule { }

应用模块：

@NgModule({
  declarations: [
    AppComponent,HomeComponent,FirstLoadedComponent,AuthCallbackComponent    
  ],imports: [
    browserModule.withServerTransition({ appId: 'ng-cli-universal' }),AppRoutingModule,HttpClientModule,ReactiveFormsModule,FormsModule,CoreModule,exports: [
  ...
  ],providers: [
  ...
  ],bootstrap: [
    //HomeComponent //gives error
    //FirstLoadedComponent //gives error
    AppComponent //triggers a <app-root>-inception resulting in double load of first component
  ],entryComponents: [
  ...
  ]
})
export class AppModule {

}

当我在 AppModule 中引导 AppComponent 时，它会触发第二个 AppModule，因此第一个加载的组件会显示两次。

当我想引导 HomeComponent（空 html）或第一个加载的组件时，我收到错误：

The selector "app-home" did not match any elements at DefaultDomrenderer2.selectRootElement 
(platform-browser.js:661)

当我在根 AppModule 中声明 HomeComponent（使用选择器 app-home）时，这怎么可能？我是否在某处用错误的逻辑覆盖了良好的逻辑？级联可能有点混乱。

*编辑：我没有同时引导所有 3 个组件，只是一个一个并在评论中添加了行为是什么。

感谢您的意见

解决方法

让我们从声明开始

我仍在研究 Angular Routing，但据我了解，路由器出口在模块中动态加载，默认情况下总是从 AppComponent 开始？

那是部分正确的。在您的 AppModule 中，您有各种数组

声明—此应用程序的唯一组件。

imports——导入 BrowserModule 以获得特定于浏览器的服务，例如 DOM 渲染、清理和位置。

供应商——服务供应商。

bootstrap——Angular 创建并插入到 index.html 主机网页的根组件。

基本上你在 bootstrap 数组中加载的任何组件都会被加载，

接下来需要注意的是，只要您不在 declarations 数组中声明组件，angular 就无法知道该组件并抛出错误

因此，为了解决您的多重加载问题，请从 boostrap 数组中移除额外的组件

bootstrap: [AppComponent],

现在，如果您不需要加载 HomeComponent，您还需要将其作为模块延迟加载

const routes: Routes = [
  {  
     path: 'home',loadChildren: () => import('home/home.module.ts').then(
     m => m.HomeModule
    ) 
  },{ path: '',redirectTo: 'home',pathMatch: 'full' }
];

现在您需要从HomeComponent的声明数组中移除AppModule，并将其添加到HomeModule的声明数组中

angular angular angular-module angular-routing