为什么没有 <app-root> 的其他组件不会出现在 index.html 上? [英] Why other components not showing up on index.html without <app-root>?
问题描述
我刚刚开始学习 Angular 并完成了一些教程.我的项目是由 Angular CLI 生成的.我在创建项目时生成的组件顶部生成了一个名为导航栏的新组件，我试图查看导航栏是否在启动时加载到我的 index.html 上.我的导航栏仅在 index.html 文件中有两个应用程序时才会显示，例如:
I have just started learning Angular and working through some tutorials. My project is generated by Angular CLI. I have generated a new component called navbar on top of the component that was generated when I created the project and I was trying to see if navbar loads up on my index.html upon start up. My navbar shows up only when I have both app in the index.html file, for example:
<body>
<app-root></app-root>
<app-navbar></app-navbar>
</body>
如果我像这样从 index.html 中删除 app-root:
If I remove app-root from index.html like so:
<body>
<app-navbar></app-navbar>
</body>
我的导航栏应用不再显示.这与 app-root 组件有关吗?是不是因为它是根组件，必须一直包含在 index.html 中?
My navbar app is not showing it anymore. Is that something that has to do with the app-root component? Is it because it is a root component and it has to be included in index.html all the time?
这是我的代码:
index.html:
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-navbar></app-navbar>
</body>
</html>
app.module.ts:
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './component1/app.component';
import { NavbarComponent } from './navbar/navbar.component';
@NgModule({
declarations: [
AppComponent,
NavbarComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [
AppComponent,
NavbarComponent
]
})
export class AppModule { }
navbar.component.ts:
navbar.component.ts:
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() {
}
}
推荐答案
Angular 尝试查找 app-root 标记并抛出错误，您可以在浏览器的控制台中看到类似这样的错误:
Angular attempts to find app-root tag and throws error that you can see in console of browser something like this:
错误:选择器app-root"没有匹配任何元素在 ha.selectRootElement (main-*.js)
所以渲染崩溃，导航栏不显示
So rendering crashes, and navbar not showing
为了避免这个问题，将带有条件的 ngDoBootstrap 方法添加到根应用模块:
To avoid this issue add ngDoBootstrap method with conditionals to root app module:
@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')
}
}
}
这篇关于为什么没有 <app-root> 的其他组件不会出现在 index.html 上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
