如何在 Angular 中加载和自定义共享组件

【问题标题】：How to load and customize shared components in Angular如何在 Angular 中加载和自定义共享组件
【发布时间】：2020-10-06 08:03:16
【问题描述】：

单击Show Hello message 应加载HelloComponent 在主页上显示“Hello”消息。

单击Show Product 1 应该加载ProductComponent 对其进行自定义，以便显示“产品1 有效！”信息。

单击Show Product 2 应该会再次加载ProductComponent，但这次对其进行自定义以显示“Product 2 Works!”。

如何实现这个功能？这是 Stackblitz 项目的链接：

【问题讨论】：

【解决方案1】：

Demo 首先要运行路由器，您需要在组件中添加<router-outlet></router-outlet>。

对于不相关的组件之间的通信有几种方式。这些是根据您的需要选择的。

其中之一是写作服务。这通常在组件之间进行选择。您可以与此服务共享数据。但这样做的缺点是，当您刷新页面时，您无法再访问数据。如果您想保持数据服务，您可以将数据存储在localStorage 或sessionStorage。

另一种方式是路由。在这里，您的问题是，当您有多个具有相同组件和不同参数的链接时。您可以路由但您无法注意到重新初始化的组件，然后您需要将onSameUrlNavigation 设置为重新加载，并将routeReuseStrategy 的shouldReuseRoute 设置为false。

您可以使用这两种方式作为不相关组件之间的通信。对于父子组件@Input方法是最简单的沟通方式

【讨论】：