angular2 вложенные компоненты

Question

У меня есть несколько компонентов, каждый из которых имеет свой собственный шаблон представления (angular2 альфа 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({ 
 
\t selector: 'post', 
 
\t viewProviders: [HTTP_PROVIDERS, WPService], 
 
\t templateUrl: './app/shared/post/post.html', 
 
\t directives: [CORE_DIRECTIVES] 
 
}) 
 
export class PostCmp { 
 
\t post: Post; 
 
\t constructor(id: string, service: WPService) { 
 
\t \t //this.post = new Post(params.get('id'), service); original 
 
     this.post = new Post(id, service); 
 
\t } 
 
}

<h1 [inner-html]="post.title"></h1> 
 
<div *ng-if="post.featured_image_url!==''" class="post-thumbnail"> 
 
\t <img width="250" height="auto" [src]="post.featured_image_url" /> 
 
</div> 
 
<div class="post-date"> 
 
\t {{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({ 
 
\t selector: 'single', 
 
\t viewProviders: [HTTP_PROVIDERS, WPService, PostCmp], 
 
\t templateUrl: './app/components/single/single.html', 
 
    \t directives: [ROUTER_DIRECTIVES] 
 
}) 
 
export class SingleCmp { 
 
    //how can I display PostCmp from SingleCmp template?? 
 
\t post: PostCmp; 
 
\t constructor(params: RouteParams, service: WPService) { 
 
\t \t post = new PostCmp(params.get('id'), service); 
 
\t } 
 
}

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

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

Как я могу добиться этого?

Answer 1

Ваш SinglCmp должен выглядеть следующим образом

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

Обязательно правильно импортировать компоненты в компоненте SinglCmp, а также добавить директивы.