angular - 如何修复 "Cannot set property of undefined"？

Question

我正在以 angular 制作倒数计时器，但在尝试从另一个组件调用变量时遇到 TypeError。我无法弄清楚究竟是什么导致了这个问题。这是我关注的视频:Countdown Timer下面是我的代码:

Timer.component.ts

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

@Component({
  selector: 'app-timer',
  template: `<span>{{ currentValue }}</span>`,
  styleUrls: ['./timer.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TimerComponent implements OnInit {

  @Input() startAt = 0;

  @Output() counter = new EventEmitter<string>();

  currentValue = '';
  constructor(private changeDetector: ChangeDetectorRef) { }

  ngOnInit(){
  }

  public start(){
    this.currentValue = this.formatValue(this.startAt);
    this.changeDetector .detectChanges();
  }

  private formatValue(v){
    const minutes = Math.floor(v/60);
    const formattedMinutes = (minutes > 9) ? minutes : ('0' + minutes);

    const seconds = v%60;
    const formattedSeconds = (seconds > 9) ? seconds : ('0' + seconds);

    return `${ formattedMinutes } : ${ formattedSeconds }`;
  }
}

question.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { TimerComponent } from '../timer/timer.component';

export class QuestionComponent implements OnInit {

  @ViewChild('counter', { read: TimerComponent })
  private counter: TimerComponent;

  ngOnInit() {
      this.counter.startAt = 2700;
      this.counter.start();
  }
}

question.component.html

<app-timer #counter></app-timer>

错误

core.js:6185 ERROR TypeError: Cannot set property 'startAt' of undefined
    at QuestionComponent.ngOnInit (question.component.ts:122)
    at callHook (core.js:4686)
    at callHooks (core.js:4650)
    at executeInitAndCheckHooks (core.js:4591)
    at refreshView (core.js:11814)
    at refreshDynamicEmbeddedViews (core.js:13154)
    at refreshView (core.js:11819)
    at refreshComponent (core.js:13229)
    at refreshChildComponents (core.js:11527)
    at refreshView (core.js:11848)

这是我的代码。请帮帮我。

Answer 1

您需要使用 AfterViewInit 等待子进程的初始化。钩。

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

export class QuestionComponent implements OnInit, AfterViewInit {

    ngAfterViewInit() {
        this.counter.startAt = 2700;
        this.counter.start();
    }

}