javascript - 根据输入操作可重用组件

Question

我创建了一个可重用的组件，并在组件内使用它两次。但我需要两个按钮，可以单独操作组件。

在我的例子中，component1 的按钮不应同时更新组件的实例。

我认为我在设计上做错了一些事情，但任何建议都会对我有帮助。

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

您必须让服务知道您从哪个组件调用。

尝试我在演示中所做的更改。

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() 组件编号:数字；

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

<强> Working Stackbiltz