使用服务的可重用组件之间的通信

Question

我创建了两个{<1>}，分别称为 1）列表和 2）详细信息，以便我可以重新使用它们：

组件看起来像这样：

现在，我将在另一个名为 SCHOOL 和 COLLEGE 的组件中使用这些组件，它们将显示如下：

现在

• 如果我从 SCHOOL 组件中的generic components组件中单击list-item（针对学校1）。我想在右侧（即，在详细信息页面/组件上）显示特定单击的项目详细信息（例如：名称，电子邮件）。

• 如果我从 COLLEGE 组件中的list组件中单击list-item（用于大学1）。我想在右侧（即，在详细信息页面/组件上）显示特定单击的项目详细信息（例如：名称，电子邮件）。

我通过此question得到了解决方案。在此示例中，正在使用list在组件之间进行通信。 但是在我的情况下，我正在使用该组件。重新使用组件时如何使用services。

Stackblitz DEMO

Answer 1

在当前情况下，最好的方法是利用@Input和@Output装饰器。

  

您需要具有@Input for details组件，该组件可以从其组件获取联系方式

@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.css']
})
export class DetailsComponent {

  @Input()
  public contact;

}

  

列表组件将从列表中选择任何项目时发出值。

export class ListComponent {

  @Output()
  public select;

  public onSelect(contact){
     this.select.emit(contact);
  }

}

  

“学校”和“学院”组件可以从“列表”组件获取发射的值，并将其传递给详细信息组件。

<div class="header">
   <h3>SCHOOL</h3>
  <div  class="left">
      <app-list  [contacts]="contacts" ></app-list>
  </div>
    <div  class="right">
      <app-details></app-details>  
    </div>
</div>

这是工作副本-https://stackblitz.com/edit/list-examples-mine-ilxisk

Answer 2

您决定创建通用组件。在这种情况下，最好创建一个能够支持某种共享模型（继承）的服务。

因此，不要为school和college创建单独的服务，而要为ItemDetailsService单独创建一个服务。

此服务应接受某种抽象模型（例如ItemDetails）。 School和college模型应该扩展这个抽象模型。