Управление повторно используемым компонентом на основе ввода

Question

Я создал повторно используемый компонент и использовал его дважды внутри компонента.Но мне нужны две кнопки, которые могут управлять компонентом индивидуально.

В моем случае кнопка для компонента1 не должна обновлять оба экземпляра компонента.

Я думаю, что я делаю что-то не такпо замыслу, но любое предложение мне поможет.

Stackblitz

Многоразовый компонент: -

    import { Component, OnInit,Input } from '@angular/core';
import { AppService } from '../app.service';
@Component({
  selector: 'app-reusable',
  templateUrl: './reusable.component.html',
  styleUrls: ['./reusable.component.css']
})
export class ReusableComponent implements OnInit {
  @Input() items:any;
  constructor(
    private service:AppService
  ) { }

  ngOnInit() {
    this.service.addFruit.subscribe(()=>{
      this.items.unshift({fruit:'Blackberry'});
    });
  }


}

Использование: -

<button type="button" (click)="Add()">Add Component1</button>
<app-reusable [items]="fruitList1"></app-reusable>
<hr/>
<button type="button" (click)="Add()">Add Component2</button>
<app-reusable [items]="fruitList2"></app-reusable>

Я хочу обновить только одинэкземпляр многократно используемого компонента сразу.Либо экземпляр 1, либо 2.

Answer 1

Каждый экземпляр ReusableComponent подписан на Subject addFruit.Нажатие на кнопку обновит значение Subject, которое активирует все подписки.

Чтобы избежать этого, вам нужно добавить фильтр в подписку, который игнорирует значения других компонентов, добавляя их при выполнении this.service.addFruit.next();.Вы можете сделать фильтрацию с оператором фильтра RXJS.https://rxjs -dev.firebaseapp.com / api / operator / filter

Другая идея состоит в том, чтобы создать подписку для каждого компонента в сервисе и сохранить их на некоторой карте / объекте в сервисе.Когда компонент запрашивает подписку у службы, он добавляет запись на карту, которая будет subjectId: new Subject ().Вы бы вернули эту новую тему для компонента, чтобы подписаться.Вместо непосредственного выполнения next () вы бы вызвали сервисный метод addNewFruit (subjectId: string, newFruit: string): void.Карта будет выглядеть так:

{
     'firstId': Subject,
     'secondId': Subject,
}

Самая простая идея для этого случая - использовать ViewChild и вызвать метод addFruit из родительского компонента.

Answer 2

Более чистым подходом было бы просто передать экземпляр компонента и вызвать связанный метод, поэтому создайте метод в вашем повторно используемом компоненте, например,

addFruit(){
    this.items.unshift({fruit:'Blackberry'});
  }

Измените метод add, чтобы получить компонент в качестве экземпляра, и вызовите этот метод

 Add(instance:ReusableComponent){
    instance.addFruit();
  }

Затем добавьте хеш для разделения каждого экземпляра и передайте экземпляр в методе

 <button type="button" (click)="Add(instance1)">Add Component1</button>
<app-reusable [items]="fruitList1" #instance1></app-reusable>

Рабочая демонстрация

Answer 3

Вы должны сообщить службе, из какого компонента вы звоните.

Попробуйте изменения, которые я сделал в демоверсии.

app.component.html

<button type="button" (click)="Add(1)">Add Component1</button>

<app-reusable [items]="fruitList1" [componentNumber]="1"></app-reusable>

app.component.ts:

Add(componentNumber:number){
   this.service.addFruit.next(componentNumber);
}

reusable.component.ts:

@Input() componentNumber: number;

 ngOnInit() {
    this.service.addFruit.subscribe((x) => {
      if (x == this.componentNumber)
        this.items.unshift({ fruit: 'Blackberry' });
    });
  }

Рабочая Stackbiltz

Answer 4

Вместо того, чтобы иметь подписку на сервис APP в повторно используемом компоненте, при нажатии кнопки вы должны изменить входные данные, предоставленные для ваших компонентов.Если вы обновляете fruitList1 или fruitList2 одновременно, он не будет обновлять другой экземпляр компонента.