Angular2 - Composants multiples ne rendant pas

Question

J'ai une application simple - 3 composants, une page. Le problème est le premier rendu des composants, mais les deux composants personnalisés que j'ai créés - ils ne le font pas. Je leur ai ajouté des données de modèles qui ne sont pas en cours de rendu, le fichier index.html chargera uniquement le texte d'aperçu, mais pas de données de composant. Id vraiment apprécier une paire d'yeux supplémentaires, je ne peux pas voir ce que j'ai oublié et une explication serait utile. Je suis encore nouveau à cela. Merci

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

Utilisez vos composants à l'intérieur du modèle de 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> 
    `, 
})