根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
将包括组件树的所有组件,但它不包含。 有没有什么办法让它们以编程方式?
可以存在多个引导组件树。这就是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>
不,组件可以彼此分开,不必组成分层树。
但是,如果有层次树,我的假设是否正确? –
您可以拥有许多树,因为根组件与其他组件相同。它只是启动树层次结构。它只是一个设计metter – Antoniossss
你知道有什么好的资源来阅读更多的东西吗?我自己没有找到任何好的东西。 –
这是被自举模块,而不是部件,不是吗?我尝试引导我的导航模块,为了好玩,但它当然没有引用核心角模块,因此失败了。 –