组件模板内嵌套的内容



我有一个名为" select-other "的组件,在里面我有两个元素,我需要在我的" select-other "组件模板中获取内容并打印。

<select-other>
  <options>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
  </options>
  <other>
    <input>
    <button></button>
  </other>
</select-other>

组件装饰

@Component({
  selector: 'select-other',
  template: `
    <select
      *ngIf="select !== 'other'"
      [(ngModel)]="select"
      class="form-control"
    >
      // CONTENT FROM INSIDE <OPTIONS> HERE
      <option
        value="other"
      >Other</option>
    </select>
    // CONTENT FROM INSIDE <OTHER> HERE
  `
})

我知道我可以在模板内使用'ng-content'来打印我的'select-other'标签之间的内容,但我有点困惑,我如何从不同的元素中获取内容并在模板中打印它们。

您可以像这样使用ng-content内容投影:

@Component({
    selector: 'select-other',
    template: `
       <select
       *ngIf="select !== 'other'"
       [(ngModel)]="select"
       class="form-control">
           // CONTENT FROM INSIDE <OPTIONS> HERE
           <ng-content select="options"></ng-content>
           <option value="other">Other</option>
       </select>
       // CONTENT FROM INSIDE <OTHER> HERE
       <ng-content select="other"></ng-content>
    `
})

所以你可以通过它的父元素选择器选择需要的内容。更多信息请点击这里

相关内容

  • 没有找到相关文章

最新更新