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应该是这样的

<SinglCmp>
  <PostCmp></PostCmp>
  <ShareCmp></ShareCmp>
  <CommentCmp></CommentCmp>
</SinglCmp>

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