Question

Angular Router定义了一个名为router-outlet的指令，如果它是路由器加载的路由，则会在该点中呈现指定的组件。

由于您可以定义基本根（/），因此可以假设您不再需要引导程序组件，因为路由器现在可以将您的父组件放在DOM上。

但是，如果您没有定义引导程序组件，则会出现错误：

The module AppModule was bootstrapped, but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method.

还假设AppModule（如果它是自举的）应该被引导到<app-root/>标签（按惯例）。

我不明白。如果应用程序引导和路由器正在路由，应用程序应该如何工作？这不会导致双组件等吗？如果应用正在呈现router-outlet，那么app-root代码的作用是什么？

Answer 1

Angular CLI有一些默认约定，但可以覆盖它们。其中之一是您的主要NgModule称为AppModule，您的顶级组件称为AppComponent。这些都可以定制。请参阅main.ts文件和app.module.ts文件。 main.ts：

    platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.log(err));

默认情况下，main.ts文件正在升级AppModule（同样可以覆盖它）

以下是app.module.ts的一篇专题文章：

    @NgModule({
  schemas: [
    NO_ERRORS_SCHEMA
  ],
  declarations: [
    AppComponent,
   ...
  ],
  imports: [
   ...
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})

Angular必须在路由工作之前引导。一旦它引导它就会查看DOM以查看它应该附加引导组件的位置。也就是说，它查看DOM并查找<app-root>元素，因为（默认情况下）AppComponent是引导组件（在AppModule中定义），app组件的默认选择器为“app-root”。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['app.component.scss']
})
export class...

通常您希望您的<router-outlet></router-outlet>元素位于app.component.html文件中。这不会导致双重组件。

在您的应用程序在浏览器中执行之前，Angular运行时环境必须 bootstrap 。 Angular的路由模块只能在Angular的运行时执行后才能工作。

Angular Module Bootstraping

角度路由器 - 为什么需要应用程序根和引导程序？

1 个答案: