我的组件未显示在索引页面中答案

【问题标题】：my component does not shown in index page我的组件未显示在索引页面中
【发布时间】：2020-04-12 22:29:06
【问题描述】：

我是初学者，我正在尝试用 Angular 创建一个简单的组件但我有问题，我的组件没有显示在索引页面中请帮帮我..

这是我的组件，名称为“List.Component.ts”：

import { Component } from '@angular/core';

@Component({
  selector:'navBar',
  templateUrl:'./navBarTemplate.html'
})

export class navBar {
  constructor(){

  }
}

这是我的模板 html 代码：

<ul>
  <li>Test-1</li>
  <li>Test-2</li>
  <li>Test-3</li>
</ul>

我在“app.module.ts”文件中导入了我的组件：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


import { AppComponent }  from './app.component';

//here is my component
import { navBar } from './List.Component';


@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, navBar ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

但 angular 只是在索引页面中显示“Hello Angular”。

我的索引页面：

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <NavBar></NavBar>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

【问题讨论】：

标签： javascript angular typescript components frontend

【解决方案1】：

<body>
    <NavBar></NavBar>
    <my-app>Loading AppComponent content here ...</my-app>
</body>

您的整个应用程序都包含在my-app 中。它的外部不知道 <navBar> 是什么，除非 Web 组件在其他地方声明和编译。

简而言之，您需要将<navBar>（注意首字母小写）inside 任何组件 inside 您的 Angular 应用程序。例如，您可以将其放在 AppComponent 中，这可能是您想要的位置。

【讨论】：

很好的解释

【解决方案2】：

您需要添加 <NavBar></NavBar> 在 app.component.html

【讨论】：

【解决方案3】：

在您的 index.html 文件中，删除导航栏选择器并在 app.component.html 文件中使用以下导航栏选择器

<navBar></navBar>

【讨论】：

【解决方案4】：

只需在 app.component.html 中添加 <navBar></navBar>。

并在navbar下方添加<router-outlet></router-outlet>，以便查看其他组件。

app.component.html

<navBar></navBar>
<router-outlet></router-outlet>

【讨论】：

app.component.html 在我的项目中不存在
你应该把它放在你的入口组件中。不管是什么。一般 app.component.ts 是 Angular Project 的入口组件。

【解决方案5】：

要解决您的问题，您需要使用以下标签：

<navBar>
           ...
</navBar>

【讨论】：