Как вызвать функцию дочернего компонента из родительского в angular? - PullRequest
Новая
       41

Как вызвать функцию дочернего компонента из родительского в angular?

0 голосов
/ 13 апреля 2020

У меня есть компонент функции следующим образом: 

export class ChildComp {
   whoAmI() {
     return 'I am a child!!';
   }
}

Мой родительский компонент: 

import { ChildComp  } form './child.component';
export class ParentComp {
   constructor(private child: childComp  ) {}
   triggerChildFunction() {
      this.childComp.whoAmI();
   }
 }

Приведенный выше метод не сработал для меня. Может кто-нибудь предложить мне помощь?

Ответы [ 2 ]

0 голосов
/ 13 апреля 2020

Я предполагаю, что это цель концепции "Сервис".

my-service.service.ts 

@Injectable()
export class MyService<T> {
  public stream$ = new Subject<T>();

  public getSteam$() {
    return this.stream$;
  }

  public publish(value: T) {
    this.stream$.next(value);
  }

}

child.component .ts 

@Component()
export class ChildComponent<T> implements OnInit, OnDestroy {
  public whoami = 'child';

  private subscription: Subscription;

  constructor(
    private myService: MyService
  ) {}

  public ngOnInit() {
    this.subscription = this.myService.getStream$()
      .subscribe((value: T) => {
          this.functionToTrigger(value);
      });
  }

  public ngOnDestroy() {
    if(this.subscription) this.subscription.unsubscribe();
  }

  private functionToTrigger(arg: T) {
    // do your stuff
    console.log(JSON.stringify(arg))
  }
}

parent.component.ts 

@Component()
export class ParentComponent<T> {
  public whoami = 'parent';

  constructor(
    private myService: MyService<T>
  ) {}

  public notifiyChild(value: T) {
    this.myService.publish(value);
  }
}
0 голосов
/ 13 апреля 2020

Я думаю, что ваш ребенок должен быть Angular сервисом, а не просто классом. 

Injectable()
export class ChildService { // remember add this to module
   public whoAmI() {
     return 'I am a child!!';
   }
}

import { ChildService  } form './child.service';
export class ParentComp {
   constructor(private child: childService  ) {}
   triggerChildFunction() {
      this.childService.whoAmI();
   }
 }

Вы также можете связать два Angular компонента с помощью Subject () или использовать @ViewChild (). Более подробную информацию о @ViewChild вы можете найти здесь

...