Как указать положение объекта в рамке, используя угловые параметры?

Question

Я пытаюсь указать положение объекта рамки, используя значения, заданные в угловом компоненте (версия 4):

<a-text value="Plane" position="{{billBoard.x}} {{billBoard.y}} {{billBoard.z}}" color="#806040" side="double"></a-text>

Угловой конструктор:

  constructor() {
    this.billBoard['x'] = 1;
    this.billBoard['y'] = 3;
    this.billBoard['z'] = 6;
}

Однако он игнорирует значения в угловом компоненте и по умолчанию принимает значение (0,0,0). Что я делаю неправильно?

Answer 1

Вы не можете выполнять интерполяцию строк, вам придется использовать привязку данных [attr.*] Angular (ng-attr- * для AngularJS).

Пример:

import ...

@Component({
    selector: 'app-root',
    template: `
        <a-scene>
            <a-box [attr.position]="'0 ' + pos.y +' 0'" color="red"></a-box>
            <a-plane rotation="-90 0 0" width="75" height="75" color="blue"></a-plane>
            <a-sky color="#f9f9f9"></a-sky>
        </a-scene>
  `
})
export class App {

    // a-box position
    private pos = new THREE.Vector3(0, 5, 0);
}

Смотрите этот плункер: Angular A-Frame - установите значения атрибутов компонента