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

Question

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

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

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

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

请帮助。

谢谢

Answer 1

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

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

并在其中定义其路径

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

{ path: 'your _link', component: child_component }

Answer 2

将子组件呈现为单独的页面？

那就没有亲子关系

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

Parent.html

<router-outlet></router-outlet>

用数据定义2个组件的路线

{路径：“您的_link”，组件：child_component，数据：{...任何数据}}

从component1导航到component2时传递数据

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

Answer 3

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

拥有数据后，您可以将其存储在localStorage中，并使用以下方法导航/打开新标签页

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

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