angular 8 как отключить кнопку дочернего компонента, который используется несколько раз в родительском компоненте

Question

У меня есть дочерний компонент, который можно использовать несколько раз в родительском компоненте с другим действием. Как я могу отключить кнопки, которые существуют в дочернем компоненте, когда я нажимаю кнопку в родительском компоненте.

Мой дочерний компонент которые могут использоваться несколько раз:

import {Component} из 'angular2 / core';

@Component({
    selector: 'my-product',
    template: `<button [disabled]="isDisableButton">select</button>`
})

export class MyCardComponent {
  @Input() isDisableButton = false;
}

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

<div>
   <p>Product Type 1<p>
  <my-product [isDisableButton]="isDisableType1Button"></my-product>
   <button (click)="onType1()">select type 1</button>
</div>

<div>
    <p>Product  Type 2<p>
  <my-product [isDisableButton]="isDisableType2Button"></my-product>
   <button (click)="onType2()">select type 1</button>
</div>

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

      @Component({
      selector: 'my-parentComponent',
      templateUrl: '..'
    })
    export class PopupDirective {

        isDisableType1Button : boolean;
        isDisableType2Button: boolean;

     onType2(){
        this.isDisableType1Button = true;
        this.isDisableType2Button = false;
         }

    onType1(){
       this.isDisableType2Button = true;
       this.isDisableType1Button = false;
      }

  }

это решение не работает правильно

Answer 1

Вы можете сделать это с выходными событиями компонента, о которых вы можете прочитать в документах .

Ниже приведен очень чистый пример, чтобы сделать его кратким:

<button (click)="b.disabled = true">trigger component</button>
<button #b>react on trigger</button>

Кнопка триггера (действующая как ваш родительский компонент) имеет стандартный вывод для события click. (Встроенный) обработчик события берется из ссылки на шаблон (#b) для непосредственной манипуляции с отключенным состоянием.

Если вы переведете это на свой пример, вы должны реализовать вывод с EventEmitter.

Answer 2

Как вы можете видеть на этом Stackblitz , в реализованной вами логике c нет ничего плохого.

Возможно, вы пропустили в своем дочернем компоненте импорт Input декоратора:

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