Question

我试图想出一个自定义选择控件，

<my-select>
   <my-option>Option 1</my-option>
   <my-option>Option 2</my-option>
   ...
</my-select>

可以使用静态文本。但是，如果我引入绑定

<my-select>
   <my-option *ngFor="let option of options">{{option}}</my-option>
</my-select>

{{option}}总是呈现为空字符串（如果我将{{option}}替换为test，那么一切都会再次起作用）。以下是我的组件：

@Component({
  selector: 'my-select',
  template: `
    <ul>
      <li *ngFor="let option of options">
        {{option.text}}
      </li>
    </ul>
  `
})
export class SelectComponent {
  options: OptionComponent[] = [];
  addOption(option): OptionComponent {
    this.options.push(option);
  }
}

@Component({
  selector: 'my-option',
  template: `
    <div #wrapper>
      <ng-content></ng-content>
    </div>
  `,
  directives: []
})
export class OptionComponent implements AfterContentInit {
  @ViewChild('wrapper') wrapper: ElementRef;
  text: string;
  constructor(private select: SelectComponent) { }
  ngAfterContentInit() {
      let text = this.wrapper.nativeElement.innerHTML;
      this.text = text ? text : 'EMPTY';
      this.select.addOption(this);
  }
}

我怎样才能让它发挥作用？

编辑：差点忘了，here's a plnkr显示问题。

Answer 1

在视图绑定ngAfterViewInit完成之前，您必须在ngAfterContentInit中使用OptionComponent而不是{{option}}。

export class OptionComponent implements AfterViewInit {
  @ViewChild('wrapper') 
  wrapper: ElementRef;
  text: string;
  constructor(private select: SelectComponent) { }
  ngAfterViewInit() {
      let text = this.wrapper.nativeElement.innerHTML;
      this.text = text ? text : 'EMPTY';
      this.select.addOption(this);
  }
}

plunker

使用nativeElement属性非常不满意，我猜想更好的方法是在@Input()上使用OptionComponent，但这超出了您的问题的范围;）

绑定不适用于嵌套组件

1 个答案: