时间戳

首页 > 解决方案 > 动态加载的组件与现有组件（Angular）之间的交互

angular - 动态加载的组件与现有组件（Angular）之间的交互

问题描述

我有一个工作堆栈闪电战。我的更改位于基于服务的文件夹中

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

我正在尝试详细说明

在职的

1) 指令和拖放功能在模板静态放置时起作用。

不工作

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

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

"<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>"

标签： angularangular-directive

解决方案

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

那么，如何在两个组件之间共享状态。穷人的状态管理。

盒子状态.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})
}

任何.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。

推荐阅读