Question

我有以下查询。 Is always the root component in Angular Component tree the bootstrap one？除了bootstraps之外，还有其他组件可能是根组件吗？

到目前为止，我的理解是引导程序模块中有一个组件树（无论有多少个模块）和引导组件 是上面树的根。 我是否正确？

constructor(private app: ApplicationRef) {
    let element = this.app.components[0];
    console.log(element);
}

以上代码是否记录了根组件？我认为this.app.components 将包括组件树的所有组件，但它不包括。 有没有办法以编程方式获取所有这些内容？

Answer 1

可以存在多个自举组件树。这就是bootstrap参数可以采用类数组而不是单个类的原因。

来自Angular的官方文档（https://angular.io/guide/bootstrapping#the-bootstrap-array）

每个引导组件都是其自己的组件树的基础。插入一个自举组件通常会触发一系列组件创建，以填充该树

我添加了一个小型的plunkr来演示多个自举组件。 https://plnkr.co/edit/ChAl9N9O5cOcojNlKl0D?p=preview

<强> app.ts

import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'child',
  template: `
    <div>
      <h2>Child Number {{count}}</h2>
    </div>
  `,
})
export class Child {

  static counter: number = 1;

  count: number;

  constructor() {
    this.count = Child.counter++;
  }
}

@Component({
  selector: 'my-app-1',
  template: `
    <div>
      <h2>Component Tree 1</h2>
      <child></child>
    </div>
  `,
})
export class App1 {
  constructor() {
  }
}

@Component({
  selector: 'my-app-2',
  template: `
    <div>
      <h2>Component Tree 2</h2>
      <child></child>
    </div>
  `,
})
export class App2 {
  constructor() {
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ Child, App1, App2 ],
  bootstrap: [ App1, App2 ]
})
export class AppModule {}

<强>的index.html

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app-1>
    loading...
    </my-app-1>
    <my-app-2>
    loading...
    </my-app-2>
  </body>

</html>

Answer 2

不，组件可以彼此分离，而不必组成层次结构树。

Root vs bootstrap组件

2 个答案: