How to specify position of an aframe object using angular parameters?

问题

I am trying to specify the position of an aframe object using values set in the angular (version 4) component:

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

Angular constructor:

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

However, it ignores the values in the Angular component and just defaults to (0,0,0). What am I doing wrong?

回答1:

You can't do string interpolation, you will have to use Angular's [attr.*] data binding (ng-attr-* for AngularJS).

Example:

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);
}

See this plunker: Angular A-Frame - set component attribute values

来源：https://stackoverflow.com/questions/43730697/how-to-specify-position-of-an-aframe-object-using-angular-parameters