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>
  `,
})

Angular2 - 多个组件不渲染

Angular2 - Multiple Components not rendering

templates

components

render

angular