Traté de declarar mi componente usando directivas ( [] ), pero no funcionó. Entonces supe que en RC6 había quedado obsoleto. Así que agregué el componente en las declaraciones @ngmodule pero aún no funciona, ¿alguna idea de por qué? edit :: ese es mi module.ts ::
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import {NavBarComponent} from "./Components/navbar/navbar.component"; import {AboutComponent} from "./Components/about/about.component"; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ,NavBarComponent , AboutComponent], bootstrap: [ AppComponent ] }) export class AppModule { }esa es mi app.component.ts ::
import { Component } from '@angular/core'; //import {AboutComponent} from "./Components/about/about.component"; @Component({ selector: 'my-app', template: `<h1>{{name}}</h1>`, }) export class AppComponent { }Ahora que el componente NavBar tiene un archivo .html ::
<nav class="navbar navbar-inverse "> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Spotify</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> </ul> </div> </div> </nav>Y Navbar.component.ts ::
import {Component} from "@angular/core"; @Component({ moduleId: module.id, selector: 'navbar', templateUrl : 'navbar.component.html', }) export class NavBarComponent { }estoy usando el inicio rápido angular, no hay error de salida, pero cuando vuelvo a cargar la página no ocurre ningún cambio y el diseño de la barra de navegación no se muestra
Parece que se pierde dónde deberían cargarse realmente sus componentes, por lo que necesita agregar <router-outlet> en algún lugar, que en su caso sería app.component . Si desea que la barra de navegación se muestre todo el tiempo, también coloque esa etiqueta en app.component
Así que tu app.component debería verse así:
import { Component } from '@angular/core'; import {NavBarComponent} from "./Components/navbar/navbar.component"; @Component({ selector: 'my-app', template: ` // Navbar always shown <navbar></navbar> // Your other routed components will load here <router-outlet></router-outlet> `, }) export class AppComponent { }¡Consulte losdocumentos oficiales de enrutamiento para obtener explicaciones más detalladas!