Как вызвать функцию компонента извне в Angular - PullRequest
Новая
       26

Как вызвать функцию компонента извне в Angular

0 голосов
/ 14 апреля 2019

Как вызвать функцию углового компонента из парантного компонента.Здесь я пытаюсь получить подтверждающее сообщение, прежде чем закрывать модальное соединение в компоненте parant.

Функция внутри дочернего компонента проверяет несохраненные изменения.И если есть какие-то несохраненные изменения, потомок потом вызовет другой модал для подтверждения.

После подтверждения из этого внутреннего модала, я затем перезвоню модалу в паранте, чтобы вызвать this.autoPopupUnratedModal.dismiss() вызов * 1006.*

Это похоже на беспорядок, но я не могу найти четкого решения.Хотя есть много ответов на этот вопрос, кажется, ничто не решает мою проблему.Может быть, я смотрю не на те источники. 

<modal #autoPopupUnratedModal size="lg" [keyboard]="'false'" [backdrop]="'static'">
    <modal-header [show-close]="true">
        <h2 class="modal-title">List of unrated jobs</h2>
    </modal-header>
    <modal-body>

        <unrated-job-notification #unratedNofitication
                 [(onDiscard)]="isCloseNotification"
                 (onDiscard)="onCloseConfirmation($event)">
        </unrated-job-notification>

    </modal-body>
    <modal-footer [show-default-buttons]="false">
        <button type="button" class="btn" (click)="rateAnotherTime()">
           Rate another time
        </button>
    </modal-footer>
</modal>

1 Ответ

0 голосов
/ 14 апреля 2019

Чтобы вызвать дочернюю функцию из его родителя, вы можете использовать viewchild, чтобы получить его ссылку или сервис с наблюдаемой реализацией rxjs.

Использование viewchild подойдет вашей проблеме Вот пример дочернего и родительского компонента, где родитель вызывает foo() метод своего дочернего компонента

дочерний компонент 

import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  constructor() { }

  foo() {
    // I will be called from my parent
  }

}

Родительский компонент 

<app-child #child_comp></app-child>




import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  @ViewChild('child_comp') childComp;
  constructor() { }

  ngOnInit() {
    this.childComp.foo();
  }

}
...