Question

我还很新，仍然在学习角度6。我正在尝试开发下拉可重用组件。

最终语法必须：

<ui-select>
  <ui-option *ngFor="let team of teams" [value]='team.id'>{{team.value}}</ui-option>
</ui-select>

select.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'ui-select',
  templateUrl: './select.component.html'
})
export class SelectComponent {


}

select.component.html

<select class="form-control">
    <ng-content></ng-content>
</select>

option.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'ui-option',
  templateUrl: './option.component.html'
})
export class OptionComponent {

   @Input()  value:any;

   constructor() {
    this.value = '';
   }

}

option.component.html

<option [value]="value"><ng-content></ng-content></option>

但是最终的html markdown是ui-option组件中的错误包装选项：

<ui-select _ngcontent-c0="">
   <select>
  <!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->
      <ui-option _ngcontent-c0="" ng-reflect-value="1">
           <option value="1">team 1</option>
      </ui-option>
      <ui-option _ngcontent-c0="" ng-reflect-value="2">
           <option value="2">team 2</option>
      </ui-option>
   </select>
 </ui-select>

我想渲染html，例如：

<ui-select _ngcontent-c0="">
   <select>
  <!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->
           <option value="1">team 1</option>
           <option value="2">team 2</option>
   </select>
 </ui-select>

如何仅获取主体ui-option组件并在select组件内部进行渲染？

拆下包装组件角钢6

0 个答案: