Вставить компонент в Angular 2

Question

Я пробовал несколько разных способов, но все примеры, которые я могу найти для этого, используют шаблон, а не templateUrl для встраивания компонентов.

В основе ядра У меня есть компонент заголовка, который я хочу отдельно, поскольку он имеет в нем функции входа в систему и отображает различную информацию в зависимости от того, вошли ли вы в систему или нет. Вместо того, чтобы помещать это в компонент приложения, я решил, что лучше разбить его на собственный компонент. По сути то, что происходит сейчас это строит найти, но не пройти мимо Loading...

Даже если это не без ошибок я предполагаю, что он не знает, что делать с <header-component></header-component

Я попытался пара различных вариантов синтаксиса для этого, но все они приводят к тому же. Я чувствую, что то, что мне не хватает, так или иначе передается импортированному компоненту. Я просто не знаю, как это сделать.

app.component.ts

import { Component } from '@angular/core'; 
import { Router } from "@angular/router"; 

import { HeaderComponent } from './header/Header.Component'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 

} 

app.component.html

<div id="header">Header</div> /*temporary place holder */ 
<header-component></header-component> 
<router-outlet></router-outlet> 

header.component.html (в настоящее время не завершена. Когда сделано проведет функции входа)

<ul id="links"> 
    <li> 
     <a href="/">Home</a> 
    </li> 
    <li> 
     <a href="/census">Census</a> 
    </li> 
</ul> 

header.component.ts

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


@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html', 
    styleUrls: ['./header.component.css'] 
}) 
export class HeaderComponent implements OnInit { 


    constructor() { } 

    ngOnInit() { 
    } 



} 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { routing } from "./app.routing"; 

import { AppComponent } from './app.component'; 
import { EncounterComponent } from './encounter/encounter.component'; 
import { CensusComponent } from './census/census.component'; 
import { PracticeComponent } from './practice/practice.component'; 
import { LocationComponent } from './location/location.component'; 
import { CensusManagementComponent } from './census-management/census-management.component'; 
import { LoginComponent } from './login/login.component'; 
import { UserComponent } from './user/user.component'; 
import { HomeComponent } from './home/home.component'; 
import { HeaderComponent } from './header/header.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    EncounterComponent, 
    CensusComponent, 
    PracticeComponent, 
    LocationComponent, 
    CensusManagementComponent, 
    LoginComponent, 
    UserComponent, 
    HomeComponent, 
    HeaderComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 1

Ваш Селектор компонент заголовка app-header, но использовать его в качестве <header-componet></header-component> в HTML.

Название тега HTML должно всегда совпадать с именем selector. В вашем app.component.html, измените на

<div id="header">Header</div> /*temporary place holder */ 
<app-header></app-header>