如何将 Angular 5 中的点击数据从父组件传递到子组件？

Posted 2023-02-23

【中文标题】如何将 Angular 5 中的点击数据从父组件传递到子组件？

【英文标题】：How to pass data on click in angular 5 from parent component to child component?

【发布时间】：2019-02-10 03:51:28

【问题描述】：

我想将父组件的按钮单击数据传递给子组件，并将子组件呈现为角度 5 中的单独页面，而不是在父模板中呈现子组件。

假设，我的子组件是“AstronautComponent”，当我添加时，

<app-astronaut *ngFor="let astronaut of astronauts"
  [astronaut]="astronaut">
</app-astronaut >

在父模板中，它在同一页面而不是单独的页面上显示子模板。实际上，我能够从父模板获取数据，但在同一父模板上。我正在使用@Input 注释和服务（作为 Observable）。

请帮助。

谢谢

【问题讨论】：

单独页面是什么意思？它完全是浏览器中的一个新标签吗？

如果您要打开一个新页面，我相信路由器参数是您唯一的选择。但是为什么使用像angular这样的单页应用程序框架而不使用单页是我无法理解的

@AnkitSharma 是的，这是一个新标签。如果父级位于 127.0.0.1:4200/父级，则新标签位于 127.0.0.1:4200/宇航员。

@Stavm 正如你所建议的，将通过路由器参数。但是我是否使用 SPA 实现了父模板完全被子模板替换？如果是，那么请告诉怎么做？

@NareshPawar - 解决方案有帮助吗？

【参考方案1】：

您可以使用router 在新页面中打开子组件，例如：

<a routerLink="/your_link">click here to open child component</a>

并在

中定义其路径

app.module.ts 打开子组件，如：

 path: 'your _link', component: child_component 

【参考方案2】：

将子组件渲染为单独的页面？

那么就没有父子关系了

有一个带有路由器插座的父组件

Parent.html

<router-outlet></router-outlet>

使用数据为您的 2 个组件定义路由

路径：'你的_link'， 组件：child_component， 数据： ...任何数据

在从组件 1 导航到组件 2 时传递数据

https://***.com/a/36835156/2742156

【参考方案3】：

您可以设置 Angular 路由，分别为 parent 和 astronaut 定义路由。请注意，这些不再有任何父/子关系。

获得数据后，您可以将其存储在 localStorage 中并使用

导航/打开新标签页

window.open('http://127.0.0.1:4200/astronaut', '_blank');

上述语句将在第二个选项卡中呈现另一个 Angular 应用程序，并呈现 astronaut 组件。此时在ngOnInit() 中，您可以检查localStorage 以获取所需的数据，如果存在，您可以简单地访问它并根据需要以html 显示它。这样，您不再需要 @Input() 属性。