Plunker 和 Angular 2 个子组件不显示输出

Question

我有最基本的 angular 2 plunk，但没有显示任何错误来指示问题。为什么我看不到子组件的任何模板输出？这是 Plunker 问题还是我的问题？

PARENT: hello_world.ts

import {Component} from 'angular2/core';
import {Jupiter} from './jupiter';
import {Uranus} from './uranus';

@Component({
  selector: 'hello-world',
  template: `
  <p>Can you see jupiter?</p>
  <jupiter></jupiter>
  <p>Can you see Uranus?</p>
  <uranus></uranus>
`
})
export class HelloWorld {

}

CHILD: jupiter.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'jupiter',
  template: `<p>Hello I'm Jupiter</p>`
})
export class Jupiter {}

CHILD: uranus.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'uranus',
  template: `<p>Hello I'm Uranus Lol</p>`
})
export class Uranus {}

Answer 1

我已经使用了我的演示并使用了您的代码来获得您可以在此处看到的预期结果：https://embed.plnkr.co/VKrvg4/

SystemJS Bootstrap 进程

基本上，我创建了一个供 SystemJS 使用的 main.ts 文件，然后此文件中的代码在 AppModule.[=20= 的帮助下引导 Angular ]

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

声明

此应用程序模块负责使用 declarations.

声明您想在 Angular 应用程序中注册的组件

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HelloWorldComponent } from './hello-world.component'
import { JupiterComponent } from './jupiter.component'
import { UranusComponent } from './uranus.component'

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, HelloWorldComponent, JupiterComponent, UranusComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Bootstrap

同一模块还在上面的代码中使用 AppComponent 到 bootstrap 您的 Angular 应用程序。此处注册的组件将被渲染为父组件。

组件渲染过程

呈现应用程序组件时，其模板使用另外两个组件。现在 Angular 知道您的其他组件，因为它是使用 declarations 注册的。

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

@Component({
  selector: 'hello-world',
  template: `
  <p>Can you see jupiter?</p>
  <jupiter></jupiter>
  <p>Can you see Uranus?</p>
  <uranus></uranus>
`
})
export class HelloWorldComponent {

}

您应该能够在视图中看到您的其他组件 UI。

Plunker 和 Angular 2 个子组件不显示输出

Plunker and Angular 2 child components don't display output

angularjs

typescript

output

plunker