angular2 嵌套组件

Question

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

PostCmp
评论Cmp
ShareCmp

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

单恋

我将从 "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>

上面的组件已经过测试并且可以正常工作。

单身Cmp:

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 组件中正确导入组件并添加指令。

angular2 嵌套组件

angular2 nested components

components

typescript

angular