如何将参数从组件传递到 angular 中的 Class

Question

I want to pass the parameter ColorPicker (Color1) from object-settings.component.html to poiComponentClass.ts, to assign it to the color of the cylinder ( const material = new THREE.MeshBasicMaterial( {color: 0xFF00FF } ); )

object-settings.component.html

<div class="col-md-5">
      <input [style.background]="color1" [(colorPicker)]="color1" (colorPickerOpen)="onEventLog('colorPickerOpen', $event)" (colorPickerClose)="onEventLog('colorPickerClose', $event)" (cpInputChange)="onEventLog('cpInputChange', $event)" (cpSliderDragStart)="onEventLog('cpSliderDragStart', $event)" (cpSliderDragEnd)="onEventLog('cpSliderDragEnd', $event)"/>
    </div>

object-settings.component.ts

 public onChangeColorCmyk(color: string): Cmyk
 {
 const hsva = this.cpService.stringToHsva(color);
 if (hsva) {
 const rgba = this.cpService.hsvaToRgba(hsva);
 return this.cpService.rgbaToCmyk(rgba);
 }
 return new Cmyk(0, 0, 0, 0);
 } 
 public onChangeColorHex8(color: string): string {
 const hsva = this.cpService.stringToHsva(color, true);
 if (hsva) {
 return this.cpService.outputFormat(hsva, 'rgba', null);}
 return '';}

poiComponentClass.ts

const THREE = this.context.three;
const textureLoader = new THREE.TextureLoader();
const geometry = new THREE.CylinderGeometry( 0.09, 0.09, 5, 5 );
geometry.rotateZ(-Math.PI * 0.5);
const material = new THREE.MeshBasicMaterial( {color: 0xFF00FF } );
const cylinder = new THREE.Mesh( geometry, material );
if (!this.inputs.sprite) {
return;} 
if (!this.inputs.sprite.startsWith('/assets/')) {
textureLoader.crossOrigin = 'Anonymous';}
let map;
if (this.inputs.sprite.indexOf('.gif') !== -1) {
map = new GifLoader().load(this.inputs.sprite);
 } else {
map = textureLoader.load(this.inputs.sprite);}
map.minFilter = THREE.LinearFilter;
map.wrapS = map.wrapT = THREE.ClampToEdgeWrapping;
this.material = new THREE.SpriteMaterial( { map, color: this.inputs.color, fog: false );
this.material.alphaTest = 0.5;
this.material.map.encoding = THREE.sRGBEncoding;
this.sprite = new THREE.Sprite( this.material );
this.sprite.add(cylinder);
this.onObjectReady(this.sprite, true);}

Answer 1

There is a lot missing here. We do not know the second snippet is inside a class decorated with @Component or not for example. There is also a lot not relevant to the question as well. If you need to learn about components communication in Angular you can start with the Official Angular Documentation (Component Interaction).

You can use different strategies to achieve your goal, such as using a service (an injectable class) or using Decorated Properties with Event Emitters or even using Facades or state-management libraries . The options are manay.