Angular 为什么其他组件没有显示在index.html上而没有<；应用程序根目录>；？
我刚刚开始学习Angular并完成了一些教程。我的项目是由Angular CLI生成的。我在创建项目时生成的组件的顶部生成了一个名为navbar的新组件，我试图查看启动时navbar是否加载到我的index.html上。我的导航栏仅在index.html文件中有两个应用程序时显示，例如：Angular 为什么其他组件没有显示在index.html上而没有<；应用程序根目录>；？,angular,typescript,bootstrap-4,angular-components,Angular,Typescript,Bootstrap 4,Angular Components,我刚刚开始学习Angular并完成了一些教程。我的项目是由Angular CLI生成的。我在创建项目时生成的组件的顶部生成了一个名为navbar的新组件，我试图查看启动时navbar是否加载到我的index.html上。我的导航栏仅在index.html文件中有两个应用程序时显示，例如： <body> <app-root></app-root> <app-navbar></app-navbar> </body> n
<body>
<app-root></app-root>
<app-navbar></app-navbar>
</body>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
constructor() {}
// tslint:disable-next-line: use-lifecycle-interface
ngOnInit() {
}
}
必须将组件选择器放置在app.component.html中：
<app-navbar></app-navbar>
应用组件）。通常您不需要超过1个引导组件，因此从AppModule中的引导中删除NavbarComponent
在高级视图中，你可以把你的应用程序看作是一个组件树，它的根是AppDebug，所以AppDebug的子必须放在App.Cuffut.HTML中，例如，NavBarComponent的子组件必须放在
navbar.component.html
中。您可以向引导添加多个组件，但它们必须来自同一个模块
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent, NavbarComponent ],
bootstrap: [ AppComponent ,NavbarComponent ]
})
export class AppModule { }
index.html
Angular尝试查找应用程序根标记并抛出错误，您可以在浏览器控制台中看到类似这样的错误：
错误：选择器“app root”与任何元素都不匹配
在ha.selectRootElement（main-*.js）
因此渲染崩溃，导航栏不显示
要避免此问题，请将带有条件的ngDoBootstrap方法添加到根应用程序模块：
@NgModule({
declarations: [],
imports: [BrowserModule, AppRoutingModule],
providers: [],
bootstrap: []
})
export class AppModule
{
ngDoBootstrap(appRef: ApplicationRef)
{
if (document.getElementsByTagName('app-root').length > 0)
{
appRef.bootstrap(AppComponent, 'app-root')
}
if (document.getElementsByTagName('app-navbar').length > 0)
{
appRef.bootstrap(NavbarComponent, 'app-navbar')
}
}
}
从AppModule中的bootstrap
中删除NavbarComponent，我更新了我的答案为什么angular团队将引导作为一个数组，如果这不正确，这里的导航栏只是一个主题组件，所以把它移到外面并没有什么害处，但是角度应用程序从单个模块引导检查我的答案：）为什么在我从index.html中删除加载后，导航栏不再显示其内容（“导航栏工作！”），而是显示“加载”。像这样尝试bootstrap:[NavbarComponent，AppComponent]
为什么要将任何组件添加到引导列表angula将查找该组件选择器并抛出错误，即使其中任何组件丢失，也会在index.html中对这两个组件进行预着色。因此，在您的情况下，在渲染另一个组件之前会抛出错误，我想问你为什么要尝试这个，为什么不把导航栏放在应用程序组件中，然后引导应用程序呢component@malbarmavi，例如，如果您需要像这样在主应用程序外部渲染角度组件
<app-navbar></app-navbar>
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent, NavbarComponent ],
bootstrap: [ AppComponent ,NavbarComponent ]
})
export class AppModule { }
<my-app>loading</my-app>
<app-navbar>loading</app-navbar>
platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
// Ensure Angular destroys itself on hot reloads.
if (window['ngRef']) {
window['ngRef'].destroy();
}
window['ngRef'] = ref;
// Otherwise, log the boot error
}).catch(err => console.error(err));
@NgModule({
declarations: [],
imports: [BrowserModule, AppRoutingModule],
providers: [],
bootstrap: []
})
export class AppModule
{
ngDoBootstrap(appRef: ApplicationRef)
{
if (document.getElementsByTagName('app-root').length > 0)
{
appRef.bootstrap(AppComponent, 'app-root')
}
if (document.getElementsByTagName('app-navbar').length > 0)
{
appRef.bootstrap(NavbarComponent, 'app-navbar')
}
}
}