Angular2访问父DOM元素属性答案

【问题标题】：Angular2 access parent DOM element attributeAngular2访问父DOM元素属性
【发布时间】：2018-11-22 01:48:11
【问题描述】：

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

<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>

【问题讨论】：

你能创建一个 plunker 吗？

标签： angular

【解决方案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

【讨论】：

这可行，但它并没有真正引用父 div，因为它引用了一个组件变量。我将有许多带有子 div 的父 div，我不想创建多个变量。

【解决方案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 开始构建。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

我将使用鼠标单击设置父 div [attr.open] 的值。子 div 将根据父 div 的状态获得状态。我不想创建多个值变量，因为我将使用 *ngFor 使用此 div 的许多实例，并且在 *ngFor 内部将是使用相同逻辑的附加 *ngFor div。

【解决方案4】：

您不能在其自己的ngIf 指令中引用子元素，因为在计算表达式时，该元素还不存在。因此，它不能用于获取其父代。

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

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

Angular 会抛出一个ExpressionChangedAfterItHasBeenCheckedError（参见this plunker）。该问题的解释在this answer by AngularInDepth.com 中给出。

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

【讨论】：

这两种方法都解决了问题，但都是使总体目标复杂化的变通方法。我将有许多使用 *ngFor 的 div 并且在这些 div 中我将有额外的 *ngFor div。所有这些单独的 div 都需要引用它们的父 div 来获取它们的状态。您建议的两种方法都需要我动态创建许多不同的#parentDiv 变量（例如#parentDiv1_1、#parentDiv1_2 ...）或不同的someValue 变量。虽然我真的只需要每个 div 的父状态。
我认为没有模板变量就不可能引用ngIf 指令中的父元素。当ngIf 表达式被求值时，子级还不存在，所以你不能用它来获取它的父级。
好的。我在想我需要使用子组件，所以每个子组件都是一个子组件，它可以拥有自己的单独变量。您认为这种方法有什么问题吗？
只要引用组件成员，我认为应该可以。您最初方法的主要问题是试图引用尚不可用的 DOM 元素。

【解决方案5】：

您可以尝试使用以下代码：

<div class="parent_div" *ngFor="let level_1 of [1,2,3]" [attr.open]="false">
    <!-- You need the #child -->
    <div class="chlid_div" *ngIf="child.parent.attr.open" #child>

        <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>

【讨论】：

我收到此错误“AssetsComponent.ngfactory.js:253 ERROR TypeError: Cannot read property 'parent' of undefined”

【解决方案6】：

您可以将它们绑定到组件中的同一个变量

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

此外，每个组件都有自己的作用域，因此变量会自动映射到正确的父级。换句话说，如果页面上有 10 个，那么 angular 组件足够聪明，只知道 myVariable适用于 1 组件的范围，只有 1 组件会受到影响。

【讨论】：

我不需要为每个元素（在组件中）定义 myVariable 吗？