реализовать логику метода (), который принадлежит компоненту A в компоненте B - PullRequest
Новая
       13

реализовать логику метода (), который принадлежит компоненту A в компоненте B

0 голосов
/ 28 мая 2018

это мой код:

Здесь вы найдете функцию, реализованную просто для добавления двух кнопок к компоненту.

Рассматривайте это как HTML-код 

editFonction = "editRole()";  

getActions(Dropup) {
      return '<div class="dropdown ' + (Dropup ? 'dropup' : '') + '">'
          + '<button class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="Edit"'
          + '(click)='+this.editFonction+'>'
          + ' <i class="flaticon-edit-1"></i>'
          + '</button>'
          + '<button class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Delete">'
          + ' <i class="fa fa-trash-o"></i>'
          + '</button>';
  }

Для первой кнопки, которая отвечает за редактирование действия, у меня есть функция щелчка (click)= "editRole()".(этот код находится в компоненте A)

Моя проблема заключается в том, что это определение функции редактирования находится в компоненте A, и я хочу вызвать и реализовать логику этой функции редактирования в другом компоненте B.

Что я сейчас делаю:

Я создал массив с именем dataFunctions в компоненте A 

dataFunctions: any[] = [];

и в конструкторе я просто заполнил его именем функции 

constructor() {
    this.dataFunctions = [this.editFonction];
  }

В компоненте B я определяю viewChild: 

@ViewChild(CustomDataTableComponent) child;
data : any[];

и просто восстанавливаю значения массива данных: 

ngAfterViewInit() {

        this.data = this.child.dataFunctions;
        console.log("output :",this.data);
      }
}

Мне нужна помощь.

Заранее спасибо

1 Ответ

0 голосов
/ 28 мая 2018

передать ссылку на компонент B в компоненте A (скажем, ссылка cmpB).тогда в html вы можете использовать (click)="cmpB.editFonction".например, 

<componentB #cmpB>
</componentB>
<div (click)="cmpB.editFunction()">
    This is where i want the function to be called
</div>

вот пример для stackblitz stackblitz.com / edit / angular-xqpm4x

...