Question

我面临着Angular 5中ElementRef的一个奇怪问题。我有一个包含两个弹出窗口的home组件，它由不同的组件ListPopUp和tile组成。我正在遍历列表并在主页上创建多个图块。当您单击一个磁贴时，它将打开一个listPopup。

从列表popUp中，您可以单击将在Parent中触发事件的函数，从而触发tile组件中的函数。

除非我们第二次触发函数myBar ElementRef（在tile组件类中）返回undefined时，所有内容都有效。我尝试使用getElementById（“myBar”）直接访问该栏，但第二次也未定义。我不确定为什么会发生这种情况，我试图修改代码并在Angular文档中寻找任何解释，但没有任何帮助。

我提供了所有三个组件的代码。

如果需要进一步的信息，请告诉我。

以下是代码：

TileComponent：

import { Component, Input, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'tile',
  templateUrl: 'tile.html'
})
export class TileComponent {
  @Input('tileinfo') tileinfo;
  @ViewChild('myBar') myBar:ElementRef;

  constructor() {

  };

  ngOnInit() {

  };

  move(value) {
    let elem = this.myBar;
    let id = setInterval(frame, this.tileinfo.progressSpeed * 1000);
    this.tileinfo.active = value;
    let val = this.tileinfo;
    val.allowNext = false;
    function frame() {
      if (val.progress >= 100) {
        clearInterval(id);
        delete val.active;
        val.allowNext = true;
        val.progress = 0;
      } else {
        val.progress++;
        elem.nativeElement.style.width = val.progress + '%';
      }
    }
  }

}

HomeComponent代码：

import { Component, ViewChild } from '@angular/core';

import { GlobalProvider } from '../../providers/global/global';
import { CommonMethodsProvider } from '../../providers/common-methods/common-methods';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('tileComponent') tileComponent: any;
  tileInfoArr: Array<any> = [];
  ageList: Array<any> = [];
  gameObject: any;
  modalInfo: any = {};
  modalList: any = {};
  constructor(public navCtrl: NavController, private globalService: GlobalProvider, private commonService: CommonMethodsProvider) {
    this.globalService.getGameDummy().subscribe(data => this.gameSetupHelper(data), error => console.log(error));
  }

  ngOnInit() {

  }

  fillTiles() {
    this.tileInfoArr = [
      {
        name: 'Research',
        progress: 1,
        description: "Description Here",
        progressSpeed: this.gameObject.researchProgress,
        allowNext: true,
      },
    ];
  }

  tileClicked(tileInfo) {
    switch (tileInfo.name) {
      case 'Research':
        if (this.tileInfoArr[0].allowNext)
        this.modalList = this.commonService.generateModalList("Research List", this.globalService.getAgeDataObj().researchList);
        break;
      default:
        break;
    }
  };

  listItemClicked(stuff) {
    if (stuff.data === "age") {
      this.tileComponent.move(this.gameObject.nextAgeDisplayName);
    } else {
      this.tileComponent.move(stuff.data.name);
    }
  };

}

ListPopupComponent：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'list-popup',
  templateUrl: 'list-popup.html'
})
export class ListPopupComponent {
  @Input('modalList') modalList;
  @Output() listItemClicked = new EventEmitter();

  text: string;

  constructor() {

  };

  startStuff(listItem): void {
    this.listItemClicked.emit({
      data: listItem
    });
  }

  closePopup() {
    this.modalList.showPopup = false;
  };

}

HTML： HomeComponent：

 <div padding style="padding-top: 0px">
    <div class="tile-container-container">
      <div class="tile-container" *ngFor="let tileinfo of tileInfoArr;">
        <tile [tileinfo]="tileinfo" (click)="tileClicked(tileinfo)" #tileComponent></tile>
      </div>
    </div>
  </div>
<info-popup [modalInfo]="modalInfo"></info-popup>
<list-popup (listItemClicked) = "listItemClicked($event)" [modalList]="modalList"></list-popup>

TileHTML：

<div class="tile-box">
  <div class="tile-inside">
    <h6>
      {{tileinfo.name}}
    </h6>
    <p>
      {{tileinfo.description}}
    </p>
  </div>
  <footer *ngIf="tileinfo.progress !== 0">
    <div id="myProgress">
      <div id="myBar" #myBar></div>
    </div>
  </footer>
</div>

ListPopupHTML

<div *ngIf="modalList.showPopup" id="myModal" class="modal">
  <div class="modal-content card">
    <span class="close" (click)="closePopup()">
     x
    </span>
    <div>
      <h6>
        {{modalList.title}}
      </h6>
    </div>
    <hr>
    <div *ngIf="modalList.list && modalList.list.length > 0;else ageChange">
      <ul class="list">
        <li  class="item" (click)="startStuff(listInfo)" *ngFor="let listInfo of modalList.list; index as i; even as isEven; odd as isOdd" class="">
          <div>
            <span class="">{{listInfo.name}}</span>
            <br>
            <span>{{listInfo.description}}</span>
          </div>
        </li>
      </ul>
    </div>
    <ng-template #ageChange>
      <div class="age-Change">
        <h1>
          Enter New Age
        </h1>        
        <div (click)="startStuff('age')" class="new-age-icon">
        </div>
      </div>
    </ng-template>
  </div>
</div>

Answer 1

回答我自己的问题。

最愚蠢的错误让我花了一天的工作。

在切片模板中使用val.progress = 0;。然后在tileComponet中创建throws FileNotFoundException。这是在最后删除div因此元素没有到来，因为根本没有元素。

很抱歉浪费每个人的时间，花时间研究这个问题......

从父组件第二次调用后，ElementRef正在丢失其值

1 个答案: