使用服务的可重用组件之间的通信[关闭]

Question

关闭。 这个问题需要调试细节。 它目前不接受答案。

---

想改善这个问题吗？ 更新问题，使其成为 Stack Overflow的主题。

2年前关闭。

改进这个问题

我创建了两个名为1)list和2)details 的generic components ，以便我可以重新使用它们：

组件如下所示：

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

现在

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

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

我得到了这个问题的解决方案。 在这个例子中，使用services的组件之间发生了通信。 但在我的情况下，我正在使用该组件。 当我重新使用组件时，我如何使用这些services 。

Stackblitz 演示

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);
  }

}

School和College组件可以从List组件获取发射值，并将其传递给details组件。

<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创建单独的服务，而应创建一项Service ItemDetailsService 。

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