如何在从父组件到子组件的角度5中单击时传递数据？

Posted 2023-02-21

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

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

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

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

请帮助。

谢谢

答案

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

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

并定义其路径

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

 path: 'your _link', component: child_component 

另一答案

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

然后没有父子关系

拥有带路由器插座的父组件

Parent.html

<router-outlet></router-outlet>

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

path：'your _link'，component：child_component，data：... any data

从component1导航到component2时传递数据

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

另一答案

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

获得数据后，您可以将其存储在localStorage中并使用导航/打开新选项卡

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

上面的语句将在第二个选项卡中呈现另一个Angular应用程序，并呈现宇航员组件。在ngOnInit()的这个时间点，您可以检查localStorage以获取所需的数据，如果存在，您只需访问它并根据需要以HTML格式显示。这样，您不再需要@Input()属性。