Question

我制作了一个应用程序，该应用程序可以通过按Angular按钮来创建新组件。您可以通过Angular Material拖放库将一个组件的元素拖放到另一组件。

我想要的是访问从中拖出的组件。我拖到的组件。

请参阅此问题底部的“简而言之：”。

我已经想出了如何访问'fromComponent'的HTMLElement（如下面的代码所示），但是我不知道该如何处理。

使用Angular Material提供的动态零部件加载程序加载零部件。

组件加载：

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
compID: any = 0;
//other stuff

loadComponent(identifier: String) {

 const componentFactory = 
 this.componentFactoryResolver.resolveComponentFactory(ModuleDBComponent);

 const viewContainterRef = this.atmHost.viewContainerRef;

 const componentRef = viewContainterRef.createComponent(componentFactory);
 (<AtmModuleDBComponent>componentRef.instance).identifier = identifier;
 (<AtmModuleDBComponent>componentRef.instance).id="compID" + this.compID;

 this.compID = this.compID + 1;
}
}

(instance).id="compID"设置了我可以通过document.getElementById()获得的HTMLElement的ID。但是，这只会返回不包含属性的HTMLElement。

这些组件具有属性id: String和moduleList: Modules[]。您可以通过Angular Material拖放库将元素从一个组件的moduleList拖放到另一个组件。

组件：

@Component({
  selector: 'app-module-db',
  host: {'[id]': 'id'},
  templateUrl: './module-db.component.html',
  styleUrls: ['./module-db.component.css']
})
export class ModuleDBComponent implements OnInit {

  modulesAdded: Module[] = [];
  identifier: String;
  id: String;
  prevComponent: ModuleDBComponent;

  constructor(private moduleService: ModuleService) { }

  ngOnInit() {
  }


  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
    // @ts-ignore
    this.prevComponent = <ModuleDBComponent>document.getElementById(event.previousContainer.element.nativeElement.parentElement.parentElement.id);

    this.ModuleService.publishMessage(JSON.stringify(this.modulesAdded), this.atmIdentifier);

  }
}

简而言之：我想要的是在组件的最后两行中通过document.getElementById()接收到的具有HTML元素可访问参数的组件。

我已经看到@viewChild是这里的解决方案，但是我不知道如何在这种情况下使用它。

感谢您的帮助。

如何在Angular中动态加载的组件之间进行通信？

0 个答案: