由於* 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。如果該元素不存在，則沒有選定的值。 –

回答

相關問題