动态加载的组件和现有组件（Angular）之间的交互答案

【问题标题】：Interaction between Dynamically loaded component and existing component(Angular)动态加载的组件和现有组件（Angular）之间的交互
【发布时间】：2019-12-10 02:58:23
【问题描述】：

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

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

【问题讨论】：

你可以发布静态示例并清理代码吗？我认为这就是它被否决的部分原因。这么多不必要的代码很难理解是怎么回事。
@christo8989 我已经删除了基于组件的文件夹并尽我所能清理不需要的代码。我放置了 5 个指令文件，1 个用于拖放功能的服务文件，用于从示例和快乐组件加载的模板中。（续）
@christo8989 Happy 组件具有我将从后端收到的那种 html 模板（让我们在示例组件中说），我需要将它传递给 Happy 组件（现在我直接放在里面快乐组件，因为我无法找出传递模板的正确方法，最后但并非最不重要的一点是，指令（拖放）没有应用于快乐组件中存在的元素。希望现在我能解释一下. 谢谢！
@christo8989 更新的 stackblitz 链接 = stackblitz.com/edit/save-qkcend
我想我真的必须为你重写你的代码，这不是这个目的。所以我没有答案来解决你的问题。但是，我无法为您指出一些解决方案。您可能想查找状态管理。这将使在组件之间跟踪框变得更加容易。我推荐 ngxs，但你也可以使用 ngrx 或 akita。代码工作的部分原因是状态/对象存在于该组件上，但不存在于另一个组件上。我希望这会有所帮助。

标签： angular angular-directive

【解决方案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。

【讨论】：

感谢克里斯的回复，我肯定会采用这种方法，但首先我应该将模板从 Example 传递给 Happy ，在传递模板并使指令工作后，我可以应用此状态管理