Конструктор Angular не может видеть объявленные объекты

Question

У меня странное поведение Angular (v9):

У меня есть следующий код:

public devices = [];

constructor(...){
  navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
      navigator.mediaDevices.enumerateDevices().then(p => this.devices = this.gotDevices(p));
  });
}//end of constructor

public gotDevices(deviceInfos){...}

Раньше это работало, теперь я получаю сообщение об ошибке:

TypeError: Невозможно прочитать свойство 'gotDevices' из неопределенного

Затем я попытался изменить код следующим образом:

public mydevices = [];

constructor(...){
let tempDevices = [];

navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
     navigator.mediaDevices.enumerateDevices().then(function (devices) {
     devices.forEach(function (device) {
         tempDevices.push(mydevice);
         this.mydevices.push(mydevice);
    }
    });
    });
    }).catch(function (err) {
    });

Если я используйте этот код, чтобы он мог видеть массив tempDevices и мог использовать его, но он по-прежнему не может видеть this.mydevices и выдает то же исключение, что и выше.

Почему это так?

Answer 1

Angular имеет различные крючки жизненного цикла. NgOnInit является одним из них. Перемещение вашего кода из конструктора в ngOnInit решит проблему.

Angular bootstrap процесс имеет два механизма: 1) построение дерева компонентов 2) обнаружение изменений

Конструктором компонента является Вызывается, когда Angular создает дерево компонентов. Все хуки жизненного цикла, включая ngOnInit, вызываются как часть следующей фазы обнаружения изменений. Обычно для логики инициализации компонента c требуются либо некоторые поставщики DI, либо доступные привязки ввода, либо визуализированный DOM. И они доступны на разных этапах процесса Angular bootstrap.

Конструктор вызывается для инициализации класса, а не компонента. Конструктор вызывается до ngOnInit, на данный момент компонент еще не создан, создается только экземпляр класса компонента, таким образом, вводятся ваши зависимости, но код инициализации не будет выполняться.

Таким образом, конструктор может использоваться для инициализации членов класса, но не должен иметь лог c.

public devices = [];

constructor(...){}

ngOnInit(){
  navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
      navigator.mediaDevices.enumerateDevices().then(p => this.devices = this.gotDevices(p));
  });
}

public gotDevices(deviceInfos){...}

Answer 2

У меня была похожая проблема, и я переместил код в метод AfterViewInit ().