コンポーネントを角2に埋め込みます

Question

私はいくつかの方法で試しましたが、私が見つけることができるすべての例は、コンポーネントを埋め込むためのtemplateUrlではなくテンプレートを使用しています。

コアには、ログイン機能があり、ログインしているかどうかに応じて異なる情報を表示するため、私は別にしたいヘッダコンポーネントがあります。これをアプリコンポーネントに入れるのではなく、自分自身のコンポーネントに分解する方が良いと思いました。基本的に今何が起こっている、それは見つける構築し、それは、私はそれが私が試した<header-component></header-component

をどうするかを知っていないと仮定していて、エラーしない場合でもLoading...

過ぎて行かないでそのためのいくつかの異なる構文オプションがありますが、すべて同じ結果になります。私は欠落しているものがインポートされたコンポーネントを何とかして渡しているように感じます。私はちょうど方法がわからない。

は

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 app.component.ts（現在は終了していないが。ログイン機能を保持する行われたときに）

<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ですが、HTMLで<header-componet></header-component>として使用します。

HTMLタグ名は、常にselectorと同じにする必要があります。 app.component.htmlで

に変更

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