Angular2 - 多個組件不呈現

Question

我有一個簡單的應用程序 - 3個組件，一個頁面。問題是第一個組件呈現，但我創建的兩個自定義組件 - 他們不。我已經將模板數據添加到他們不是呈現，index.html將只加載預覽文本，但沒有組件數據。我非常欣賞一雙額外的眼睛，我看不出我忽略了什麼，並且解釋會很有用。我對此仍然陌生。由於

app.module.ts

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

import { AppComponent } from './app.component'; 
import { HeadComponent } from './head.component'; 
import { FooterComponent } from './footer.component'; 


@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ AppComponent, HeadComponent, FooterComponent ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { } 

app.component.ts

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

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>This is my-app</h1> 
    <p><strong> {{id}}</strong></p> 
    <p><strong> {{title}}</strong></p> 
    <p><strong> {{description}}</strong></p> 
    `, 
}) 

export class AppComponent implements OnInit{ 

    id:string; 
    title:string; 
    description:string; 


    constructor(){ 
    console.log('constructor called.') 
    } 

    // lifecycle hook 
    ngOnInit(){ 
    this.id = '1'; 
    this.title = 'Full Stack - Angular 2 Java'; 
    this.description = 'lorum isum is some text..'; 
    } 

} 


    interface jobInfo { 
    id:string; 
    title:string; 
    description:string; 
    } 

head.component.ts

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

@Component({ 
    selector: 'my-head', 
    template: ` 
    <div> 
    <h1>This is my-header</h1> 
    <label>testtest</label> 
    </div> 
    `, 

}) 

export class HeadComponent implements OnInit{ 

    id:string; 
    title:string; 
    description:string; 


    constructor(){ 
    console.log('constructor called.') 
    } 

    // lifecycle hook 
    ngOnInit(){ 
    this.id = '1'; 
    this.title = 'Full Stack - Angular 2 Java'; 
    this.description = 'lorum isum is some text..'; 
    } 

} 


    interface jobData { 
    id:string; 
    title:string; 
    description:string; 
    } 

footer.component.ts

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

@Component({ 
    selector: 'my-foot', 
    template: ` 
    <h1>This is my-foot</h1> 
    <label>testtest</label> 
    `, 
}) 

export class FooterComponent implements OnInit{ 




    constructor(){ 
    console.log('constructor called.') 
    } 

    // lifecycle hook 
    ngOnInit(){ 

    } 

} 


    interface jobData { 
    id:string; 
    title:string; 
    description:string; 
    } 

Answer 1

使用您的組件的AppComponent

@Component({ 
    selector: 'my-app', 
    template: ` 
    <my-head></my-head> 
    <h1>This is my-app</h1> 
    <p><strong> {{id}}</strong></p> 
    <p><strong> {{title}}</strong></p> 
    <p><strong> {{description}}</strong></p> 
    <my-foot></my-foot> 
    `, 
})