从父级调用Child方法(并传递数据)，Child将在角度中动态加载组件(路由器出口或延迟加载的子级)

Question

子组件是延迟加载的组件，因此

<路由器出口#child>

父

"child.childMethod((">

这不起作用，你能帮我从父组件调用子方法吗？还有我如何在子组件和父组件之间传递数据这将类似于主布局和不同的子组件场景。

Answer 1

根据我对angular的理解，当以这种方式延迟加载组件时，使用child.childMethod()是不可能的，因为父级不知道它将加载什么。

如果您试图多次触发childMethod()，则可以选择使用服务。

它将在parent中提供，然后您可以在child中使用它。

然后，您可以通过订阅parentService的提供商来触发childMethod()

// parent.module.ts
providers: [
ParentService
]

// parent.service.ts
triggerChildMethod$: BehaviorSubject<boolean> = new BehaviorSubject(null)

// parent.component.ts
constructor(private _parentService: ParentService) {}
childMethod() {
this._parentService.next(true);
}

// child.component.ts
constructor(private _parentService: ParentService) {}
ngOnInit() {
this._parentService
.pipe(
filter((event) => (typeof event === "boolean" ? true : false)), // Avoid triggered on instantiating
takeUntil(this._unsubscribeAll), // Do not forget to unsubscribe
)
.subscribe((value) => {
this.childMethod() // Here you are
})
}