为什么没有< app-root>的其他组件无法显示在index.html上? [英] Why other components not showing up on index.html without <app-root>?
问题描述
我刚刚开始学习Angular并完成了一些教程.我的项目是由Angular CLI生成的.在创建项目时，我在生成的组件之上生成了一个名为navbar的新组件，我试图查看启动时是否在我的index.html上加载了navbar.仅当两个应用都位于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删除应用程序根:
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() {
}
}
推荐答案
您可以将多个组件添加到引导程序，但是它们必须来自同一模块
you can add multiple component to bootstrap but they must be from the same module
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent, NavbarComponent ],
bootstrap: [ AppComponent ,NavbarComponent ]
})
export class AppModule { }
index.html
<my-app>loading</my-app>
<app-navbar>loading</app-navbar>
从单个模块(例如，此处的appmodule)启动角度应用程序
the angular app bootstrap from a single module like appmodule here
main.ts
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));
这篇关于为什么没有< app-root>的其他组件无法显示在index.html上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
