Question

我想制作一个选择框组件。简化的组件：

@Component({
    moduleId: module.id,
    selector: 'ng2-select',
    template: `
        <div class="container">
           <div class="placeholder"></div>
           <div class="options"
              *ngIf="selectService.isSelectorVisible()"
              [@animateState]="selectService.getSelectorAnimState()">
              <ul>
                 <ng-content></ng-content>
              </ul>
           </div>
        </div>
    `
})
export class SelectComponent {}

@Component({
    moduleId: module.id,
    selector: 'ng2-option',
    template: `
       <li (click)="selectValue($event)" 
           [class.disabled]="disabled"
           [class.active]="value == selectService.getSelectedValue()">
           <div class="inner" #contentWrapper>
               <ng-content></ng-content>
           </div>
       </li>
    `
})
export class OptionComponent {}

我使用的组件如下：

<ng2-select placeholder="Select an option">
   <ng2-option value="1">Option 1</ng2-option>
   <ng2-option value="2" disabled="true">Option 2</ng2-option>
   <ng2-option value="3" selected="true">Option 3</ng2-option>
   <ng2-option value="4">Option 4</ng2-option>
   <ng2-option value="5">Option 5</ng2-option>
</ng2-select>

我想在SelectComponent中使用选择哪个选项的信息。问题是这些信息存储在组件的子组件中，而不是由于* ngIf而添加到dom中。

我知道我能做到：

将所选选项的信息作为SelectComponent的输入传递。
使用隐藏可见性而不是* ngIf并从ElementRef中找到它。

但我不想这样做。我想保持原样。有没有办法可以找出哪个ng2-option的属性选择设置为true，即使它没有添加到DOM？

Answer 1

这些孩子不存在，因此您无法访问它们。

您可以使用

[hidden]="!showChildren"

而不是

*ngIf="showChildren"

将元素添加到DOM而不显示它们。

另见What is the equivalent of ngShow and ngHide in Angular2?

由于* ngIf而没有添加到DOM时访问子元素

1 个答案: