Angular не связывает данные сразу, даже когда значение жестко закодировано - PullRequest
Новая
       8

Angular не связывает данные сразу, даже когда значение жестко закодировано

0 голосов
/ 09 мая 2019

Я пытаюсь интегрировать A-Frame в HTML-шаблон Angular, но я не до конца понимаю, как Angular обрабатывает привязку данных.Библиотека A-Frame импортируется в polyfills.ts.

С учетом шаблона: 

<a-asset-item
  [attr.id]="'cityModel'"
  [attr.src]="'https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf'"
  (error)="error($event)"
  (loaded)="assetItemLoaded($event)">
</a-asset-item>

Angular сначала заполнит дом: 

<a-asset-item></a-asset-item>

Ни один изпривязки данных связаны пока .A-Frame пытается прочитать из <a-asset-item> для id и src, но поскольку они еще не связаны (даже если в этом примере они жестко запрограммированы), они вызовут нулевую ошибку. 

Cannot read lastIdexOf null

Если мы проигнорируем эту ошибку, мы увидим, что и id, и src назначены в DOM, но не в то же время, что и при создании <a-asset-item>. 

<a-asset id="cityModel" src="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf">

Это приводит к гонке.A-Frame стремится прочитать с a-asset-item, как только он появится в DOM.Angular стремится добавить элемент в DOM, не заполняя все его атрибуты.

Есть ли способ добавить элемент и его атрибуты одновременно в DOM, сохраняя при этом преимущества привязки данных?

Дополнительное обновление:

Мне удалось преодолеть проблему немедленного связывания с: 

<a-asset-item
  id=""
  src=""
  [attr.id]="'cityModel'"
  [attr.src]="'https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf'"
  (error)="error($event)"
  (loaded)="assetItemLoaded($event)">
</a-asset-item>

В то же время, что и элемент: 

id=""
src=""

После элемента: 

[attr.id]="'cityModel'"
[attr.src]="'https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf'"

1 Ответ

0 голосов
/ 24 мая 2019

Это может быть не проблема, если я напрямую изменю исходный код A-Frame:

Angular: 

<a-asset-item
  *ngFor="let model of assetItems; trackBy: trackAsset"
  [attr.id]="model?.id"
  [attr.src]="model?.asset?.file?.uri">
</a-asset-item>

aframe-v0.9.2.js: 

registerElement('a-asset-item', {
  prototype: Object.create(ANode.prototype, {
    createdCallback: {
      value: function () {
        ...
      }
    },

    attachedCallback: {
      value: function () {
        var self = this;
        var src = this.getAttribute('src') || ''; // <--- Modified line
        ...
      }
    }
  })
});

Таким образом, несмотря на то, что в Angular изначально отсутствует src до привязки данных, приложение не выдает ошибку.Src все еще может быть обновлен и связан без проблем.

...