根vs自举组件

我有以下查询。 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 将包括组件树的所有组件，但它不包含。 有没有什么办法让它们以编程方式？

来源

2017-12-27 Unknown developer

这是被自举模块，而不是部件，不是吗？我尝试引导我的导航模块，为了好玩，但它当然没有引用核心角模块，因此失败了。 –

可以存在多个引导组件树。这就是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>

来源

2018-01-04 10:20:19 Mohit

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

来源

2017-12-27 19:25:12 Antoniossss

但是，如果有层次树，我的假设是否正确？ –

您可以拥有许多树，因为根组件与其他组件相同。它只是启动树层次结构。它只是一个设计metter – Antoniossss

你知道有什么好的资源来阅读更多的东西吗？我自己没有找到任何好的东西。 –

回答

相关问题