由于* ngIf

未添加到DOM时访问子元素我想创建一个选择框组件。简化组件：由于* ngIf

@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选项的属性选择设置为true，即使它没有添加到DOM？

来源

2016-08-25 Baumi

请出示'* ngIf'在你的问题。 –

对不起，不知道我是如何错过的;）感谢您指出！ – Baumi

这些孩子不存在，因此你不能访问他们。

您可以使用

[hidden]="!showChildren"

代替

*ngIf="showChildren"

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

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

来源

2016-08-25 09:12:06

检查我的问题底部的要点。我写道，我知道我可以这样做。我的问题更多的是关于组件生命周期级别的访问。我知道它不在DOM中，但我在想，也许有一种方法可以在ngOnInit中获取组件模板的内容，等等。 – Baumi

我不认为这是可能的。您应该避免依赖于DOM中的内容，只依赖模型中的数据，并根据模型让Angular2更新DOM。如果该元素不存在，则没有选定的值。 –

回答

相关问题