在 Angular 中使用事件发射器从子组件中查找客户信息

Question

我有两个同级组件。在 One Component 中，我有一些客户信息，单击它我将 id 和一些更多信息传递给应用程序组件。通过查找id我需要找到客户的完整信息并显示在兄弟组件中。

下面是我的代码。

应用程序组件的

HTML：

<customer-table [customers]="customers" (setSelectedId)="setSelectedId($event)"></customer-table>
<customer-details [selectedId]="selectedId" [customerDetailsRecords]="customerDetailsRecords"></customer-details>

应用组件：

export class AppComponent {
  title = 'Customer Records';
  selectedId = '';

  customers: Customer[] = [{
      id: 'henry-gerard',
      firstName: "Henry",
      lastName: "Gerard",
      age: 21
    },
    {
      id: 'michael-platini',
      firstName: "Michael",
      lastName: "Platini",
      age: 40
    },
    {
      id: 'louis-figo',
      firstName: "Louis",
      lastName: "Figo",
      age: 37
    },
    {
      id: 'cristiana-ronaldinho',
      firstName: "Cristiana",
      lastName: "Ronaldinho",
      age: 15
    },
    {
      id: 'leonardo-messiah',
      firstName: "Leonardo",
      lastName: "Messiah",
      age: 25
    }
  ]

  customerDetailsRecords: CustomerDetail[] = [{
      id: 'henry-gerard',
      city: 'Los Angeles',
      gender: 'Male',
      pin: 3123,
      country: 'USA',
      state: 'CA'
    },
    {
      id: 'michael-platini',
      city: 'Miami',
      gender: 'Male',
      pin: 3176,
      country: 'USA',
      state: 'FL'
    },
    {
      id: 'louis-figo',
      city: 'Seattle',
      gender: 'Male',
      pin: 3176,
      country: 'USA',
      state: 'WA'
    },
    {
      id: 'cristiana-ronaldinho',
      city: 'Denver',
      gender: 'Female',
      pin: 3178,
      country: 'USA',
      state: 'CO'
    },
    {
      id: 'leonardo-messiah',
      city: 'Portland',
      gender: 'Female',
      pin: 3165,
      country: 'USA',
      state: 'OR'
    }
  ];

  setSelectedId(id) {
    //console.log(id);
    this.selectedId = id;
  }
}

组件 A：

export class CustomerTable implements OnInit {
  @Input() customers: Customer[];
  @Output() setSelectedId: EventEmitter<string> = new EventEmitter<string>();

  sendCustomerId(customer: string) {
    this.setSelectedId.emit(customer);
  }

  constructor() { }
}

组件 B：

export class CustomerDetails implements OnInit {
  @Input() customerDetailsRecords;
  @Input() selectedId;

  constructor() { }

Answer 1

你可以做的是在父组件上接收你想在兄弟组件上显示的元素，然后像你一样通过绑定传递它。

要做到这一点，您可以做的是声明一个变量，该变量保存要传递给 B 组件的值，并在视图上将其绑定到 B 组件。

当 A 组件发出新值时，将其分配给变量，它应该在 B 组件上呈现。

Answer 2

尝试以下 -

customer-detail.component.html -

<h2>Customer Detail</h2>
<div>
    {{customerDetail?.id}}
</div>

customer-detail.component.ts -

export class CustomerDetailsComponent {

    @Input() customerDetail: CustomerDetail;

    constructor() { }
}

customer-table.component.html -

<h2>Customer Table</h2>
<div *ngFor="let customer of customers" (click)="sendCustomerId(customer?.id)">
    <p>{{customer.id}}</p>
</div>

customer-table.component.ts -

export class CustomerTableComponent {

    @Input() customers: Customer[];
    @Output() selected: EventEmitter<string> = new EventEmitter<string>();

    constructor() { }

    sendCustomerId(id: string) {
        this.selected.emit(id);
    }
}

app.component.html -

<customer-table [customers]="customers" (selected)="setSelectedId($event)"></customer-table>
<customer-detail [customerDetail]="selectedCustomer"></customer-detail>

app.component.ts -

export class AppComponent {

    customers: Customer[] = // initialize array of Customer
    customerDetailsRecords: CustomerDetail[] = // initialize array of CustomerDetail
    
    selectedCustomer: CustomerDetail;

    constructor() { }   

    setSelectedId(id) {
        this.selectedCustomer = this.customerDetailsRecords.find(p => p.id == id);
    }
}

这是一个有效的 StackBlitz

在 Angular 中使用事件发射器从子组件中查找客户信息

Find Customer information from Child Component using Event Emitter in Angular

eventemitter

angular