Question

我正在努力工作。我的更改位于基于服务的文件夹中

https://stackblitz.com/edit/dynamic-component-example-1rvd1p?file=src%2Fapp%2Fservice-based%2Fexample.component.ts

我正在尝试阐述

工作

1）静态模板时，指令和拖放功能有效放置。

不起作用

2）当我加载动态组件时（传递html内容[从后端接收现实世界中的响应]从示例组件到快乐组件）自定义指令不起作用，Example组件中的功能也起作用不是从快乐组件触发的

我需要从Example传递的从后端接收的数据组件到快乐组件

"<div xmlns="http://www.w3.org/1999/xhtml" _ngcontent-c18="" appdropzone=""
appmovablearea="" class="dropzone">

<div _ngcontent-c18="" appdroppable="" appmovable=""
class="box draggable movable ng-star-inserted" touch-action="none" 
style="transform: translateX(136.8px) translateY(112.8px);"> room1 </div>

<div _ngcontent-c18="" appdroppable="" appmovable=""
class="box draggable movable ng-star-inserted" touch-action="none" 
style="transform: translateX(136.8px) translateY(112.8px);"> room2 </div>

</div>"

Answer 1

部分问题是您如何处理状态。当您说代码有效时，是因为您的状态仅存在于该组件中。

因此，如何在两个组件之间共享状态。可怜的人的状态管理。

box.state.ts

export interface BoxState {
  boxes: string[];
  selectedBox: string | null;
  boxesInBucket: string[];
}

box.service.ts

public state = new BehaviorSubject<BoxState>()

set(newState: Partial<BoxState>): void {
  this.state.next({...this.state.value, ...newState})
}

any.component.ts

export class AnyComponent implements OnInit, OnDestroy {
  private sink = new SubSink();


  constructor(private boxService: BoxService) { }

  ngOnInit() {
    this.sink.add(
      this.boxService.state.subscribe(state => {
        //.. grab relevant state
      });
    );
  }

  ngOnDestroy() {
    this.sink.unsubscribe();
  }


  click(): void {
    this.boxService.set({ /* ... update state */})
  }
}

检出npm的subsink。

动态加载的组件与现有组件（角度）之间的交互作用

1 个答案: