Question

如何从div“child_div”访问[attr.open] =“false”。总之，我想模仿下面的代码示例，但我不知道如何从子div访问父attr。

<div class="parent_div" *ngFor="let level_1 of [1,2,3]" [attr.open]="false">
   <div class="chlid_div" *ngIf="parent.attr.open">

       <div class="parent_div" *ngFor="let level_2 of [1,2,3]"
       [attr.open]="false">
          <div class="chlid_div" *ngIf="parent.attr.open">
             content
          </div>
       </div>

   </div>
</div>

Answer 1

您可以使用以下内容的模板

<div [attr.open]="my()"> <div class="chlid_div" *ngIf="data">content</div> </div>

<强>组件

export class AppComponent { data: boolean; my() { this.data = true; } }

Working Example

Answer 2

好的解决方案实际上非常简单，无需指令或编辑所需的组件，纯模板解决方案。

<div #areaLevel class="parent_div" *ngFor="let level_1 of [1,2,3]">
   <div class="chlid_div" [hidden]="areaLevel.expanded">

        <div class="button" [class.closed]="areaLevel.expanded" (click)="areaLevel.expanded = !areaLevel.expanded">
            +
        </div>

       <div #areaLevel class="parent_div" *ngFor="let level_2 of [1,2,3]">
          <div class="chlid_div" [hidden]="areaLevel.expanded">
             ...this can continue indefenitly...
          </div>
       </div>

   </div>
</div>

您可以使用* ngIf或[hidden]，就像我一样，但使用* ngIf会破坏DOM，如果再次打开它，则会从0开始构建它。

Answer 3

我没有得到你想要的东西，你不需要输入和输出来交换变量吗？

我想你想做这样的事，不是吗？

<app-parent *ngIf="data">
  <app-child [myInput]="toChildren(value)" (toParent)="toParent(value)" 
       class="chlid_div">content</app..>
</app..>

Answer 4

您不能在其自己的ngIf指令中引用子元素，因为正在评估表达式时，该元素尚不存在。因此，它不能用于获取其父级。

引用父div的一种方法是使用template reference variable。但是，如果您尝试在#parentDiv中使用ngIf，请参阅以下示例：

<div #parentDiv [attr.open]="true">
    <div class="chlid_div" *ngIf="parentDiv.getAttribute('open') === 'true'">content</div>
</div>

Angular将抛出ExpressionChangedAfterItHasBeenCheckedError（请参阅this plunker）。 this answer由AngularInDepth.com提供了对该问题的解释。

避免该问题的一种方法是引用ngIf指令内的组件类的成员，而不是尝试引用DOM元素。

Angular2访问父DOM元素属性

4 个答案: