Question

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

<b-article>

并在里面我有一些自定义元素

B-标题
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;
    }
}

没有获得ewxpected结果，长度为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：将多槽转换内容作为参数传递给子组件

1 个答案: