基于输入操作可重用组件

Question

我创建了一个可重用的组件并在一个组件内使用它两次。但是我需要两个按钮，它们可以单独操作组件。在我的情况下，component1 的按钮不应同时更新组件的实例。我认为我在设计上做错了什么，但任何建议都会对我有所帮助。可重用组件：-    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

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

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

应用程序组件.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' });

    });

  }