angular2嵌套组件

Question

我有多个组件，每个组件都有自己的视图模板（angular2 alpha 46）

• PostCmp
• CommentCmp
• ShareCmp

我想从主要组件加载它们并将它们显示在自己的视图模板中

• SingleCmp

我将首先加载一个组件“PostCmp”到“SingleCmp”

PostCmp：

import { Component, Injectable, CORE_DIRECTIVES } from 'angular2/angular2';
import { HTTP_PROVIDERS } from 'angular2/http';
import { ROUTER_DIRECTIVES, RouteParams } from 'angular2/router';
import { WPService } from './../../lib/wpservice';
import { Post } from './../../lib/PostType';

@Component({
	selector: 'post',
	viewProviders: [HTTP_PROVIDERS, WPService],
	templateUrl: './app/shared/post/post.html',
	directives: [CORE_DIRECTIVES]
})
export class PostCmp {
	post: Post;
	constructor(id: string, service: WPService) {
		//this.post = new Post(params.get('id'), service); original
      this.post = new Post(id, service);
	}
}

<h1 [inner-html]="post.title"></h1>
<div *ng-if="post.featured_image_url!==''" class="post-thumbnail">
	<img width="250" height="auto" [src]="post.featured_image_url" />
</div>
<div class="post-date">
	{{post.date}}
</div>
<div class="post-content" [inner-html]="post.content"></div>
</div>

上面的组件已经过测试并且正在运行。

SingleCmp：

import { Component, Injectable, CORE_DIRECTIVES } from 'angular2/angular2';
import { HTTP_PROVIDERS } from 'angular2/http';
import { ROUTER_DIRECTIVES, RouteParams } from 'angular2/router';
import { WPService } from './../../lib/wpservice';


import { PostCmp } from './../../shared/post/post';

@Component({
	selector: 'single',
	viewProviders: [HTTP_PROVIDERS, WPService, PostCmp],
	templateUrl: './app/components/single/single.html',
  	directives: [ROUTER_DIRECTIVES]
})
export class SingleCmp {
    //how can I display PostCmp from SingleCmp template??
	post: PostCmp;
	constructor(params: RouteParams, service: WPService) {
		post = new PostCmp(params.get('id'), service);
	}
}

<!-- something like this -->
{{post}}

<!--{{share}}-->
<!--{{comment}}-->

我怎样才能做到这一点？

Answer 1

你的SinglCmp看起来应该是这样的

auxiliaryGroups.fields

确保在SinglCmp组件中正确导入组件并添加指令。