2017-12-27 816 views
3

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

+0

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

回答

3

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

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

+0

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

+0

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

+0

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