Question

我想防止我的初始组件被加载两次。我正在尝试使用默认/空组件来避免 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,    
    SharedModule,
    OtherModules     
  ],
  providers: [
    LoginService
  ]
})
export class HomeModule { }

应用模块：

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,     
    FirstLoadedComponent,    
    AuthCallbackComponent    
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    AppRoutingModule,
    SharedModule,
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule,
    CoreModule,
    OtherModules
  ],
  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 个组件，只是一个一个并在评论中添加了行为是什么。

感谢您的意见

Answer 1

让我们从声明开始

<块引用>

我仍在研究 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的声明数组中

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

1 个答案: