根vs自举组件

  • Z时代
  • 2024-01-10
  • 分类：问答

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

到目前为止，我的理解是有一个组件树（不管多少模块有）和引导模块内引导组件是上述树的根。 我正确与否？

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

是否上面的代码登录的根组件？我认为this.app.components 将包括组件树的所有组件，但它不包含。 有没有什么办法让它们以编程方式？

回答：

可以存在多个引导组件树。这就是bootstrap参数可以接收一组类而不是单个类的原因。

从角的官方文档（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/[email protected]/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/[email protected]/Reflect.js"></script> 
    <script src="https://unpkg.com/[email protected]/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>

回答：

不，组件可以彼此分开，不必组成分层树。

以上是 根vs自举组件 的全部内容， 来源链接： utcz.com/qa/267137.html

回到顶部