Question

好的，标题可能有点令人困惑。我的子组件位于其自己的模块中，并且正在使用父组件不可用的服务。

我想在单击按钮时更改子组件中的某些值，并且四处乱动并进行如下设置。

@Component({
 selector: 'app-parent-component'
 template: `
 <button (click)="refreshData()" />
 <app-child-component> </app-child-component>
`
})
export class ParentComponent{
 refreshData() {
   ChildComponent.runRefresh()
 }
}

@Component({
 selector: 'app-child-component'
 template: ``
})
export class ChildComponent{
 static runRefresh() {
   console.log('refreshing')
   // Do things involving data on a service scoped to this component/module
 }
}

我很好奇这种方法是否固有错误？有没有更好的方法来解决问题。我对检查NgOnChanges事件中的更改不熟悉。

我猜我想做的是在子组件内部调用一个方法，该方法从父组件使用作用域服务上的子组件资源。

编辑：还知道使用@ViewChild并不会将子组件方法设为静态。也许这是唯一的“正确”方法？

Answer 1

如果runRefresh是子组件的公共方法：

export class ChildComponent{
  public runRefresh() {
    ...
  }
}

您可以在template reference variable的帮助下通过引用子组件直接在父模板中调用它：

<button (click)="child.runRefresh()" />
<app-child-component #child></app-child-component>

有关演示，请参见this stackblitz。

Answer 2

最简单的方法是编写提供事件，在父级中发出，在子级中订阅的服务。

另一种方式：

您可以编写一条提供组件引用的指令：

import { Directive, TemplateRef } from '@angular/core';

@Directive({
  selector: '[selectordirective]',
})
export class SelectorDirective  {
  constructor(public cmpRef: ChildComponent) { }
}

将其附加给您的孩子：

<app-child-component selectordirective> </app-child-component>

使用ViewChild读取ParentComponent中的引用：

@ViewChild(SelectorDirective) child !: SelectorDirective;

  ngAfterViewInit() {
    child.cmpRef.runRefresh()
  }

如何从父组件调用子组件中的方法？

2 个答案: