javascript - mi componente no se muestra en la página de índice

Soy principiante y estoy tratando de crear un componente simple en Angular, pero tengo un problema, mi componente no se muestra en la página de índice, por favor ayúdame..

este es mi componente con nombre "List.Component.ts" :

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

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

export class navBar {
  constructor(){

  }
}

este es mi código HTML de plantilla:

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

Y importé mi componente en el archivo "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 { }

pero Angular solo mostró "Hello Angular" en la página de índice.

mi página de índice :

<!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>

Respuesta #1

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

Toda tu aplicación está envuelta dentro de my-app. La parte exterior de la misma no sabe qué es <navBar>, a menos que el componente web esté declarado y compilado en otro lugar.

En pocas palabras, necesitas envolver <navBar> (cuidado con la n inicial en minúscula) dentro de cualquier componente dentro de tu aplicación Angular. Por ejemplo, puedes colocarlo dentro de AppComponent, que probablemente es donde querías que estuviera.

Respuesta #2

Necesitas agregar <NavBar></NavBar> en app.component.html