Angular2：将多槽嵌入内容作为参数传递给子组件

Question

我有和文章组件前缀为 b-...

<b-article>

里面我有一些自定义元素

b-title
b-照片
b-总结

这样使用：

<b-article-item>
    <b-title>My Article Title</b-title>
    <b-photo>http://placehold.it/1280X720</b-photo>
    <b-summary>some new content</b-summary>
</b-article-item>

所以，如果我不会在文章项目中添加更多组件（并且没有照片），那么它会相当容易：

<div class="article">
    <h2><ng-content select="b-title"></ng-content></h2>
    <p class="summary"><ng-content select="b-summary"></ng-content></p>
</div>

但是，照片已经变得复杂了，其中 src 作为属性

<div class="article">
    <img src="{{photo}}">
    <h2><ng-content select="b-title"></ng-content></h2>
    <p class="summary"><ng-content select="b-summary"></ng-content></p>
</div>

我的结构有点复杂，但是逻辑上差别不大....

<div class="article">
    <b-thumbnail
        [photo] = "photo"
        [isResponsive] = "true"
    ></b-thumbnail>
    <b-excerpt
        [title]="title"
        [summary]="summary"
    ></b-excerpt>
</div>

怎样才能将 b-photo 的内部 HTML 作为文章项目的属性...

值得一提的是，b-photo、b-title 和 b-summary 不是实际组件，只是自定义标签（使用 CUSTOM_ELEMENTS_SCHEMA 允许它们）

有什么想法吗？

我试着把它放在文章项目构造函数中

constructor(private el:ElementRef){
    let ref = this.el.nativeElement;

    let photos = ref.getElementsByTagName('b-photo');

    if(photos.length > 0){
        this.photo = photos[0].innerHTML;
    }
}

没有得到预期的结果，长度为0

Answer 1

这绝对不是在 Angular2 中应该如何完成的，因为它需要从 DOM 读取并且在应该使用服务器端渲染和 WebWorker 功能时会导致问题。

这应该可行：

<div class="article">
    <span #wrapper><ng-content select="b-photo"></ng-content></span>
</div>

export class BArticleItem {
  @ViewChild('wrapper') wrapper:ElementRef;

  ngAfterContentInit() {
    this.photo = this.wrapper.nativeElement.querySelector('b-photo').innerHTML;
  }
}

Angular2：将多槽嵌入内容作为参数传递给子组件

Angular2: Passing multi-slot transcluded content to children components as parameters

angularjs-ng-transclude

angular