Question

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

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

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

这在父模板中它在同一页面而不是单独的页面上显示子模板。实际上我能够从父到子获取数据但在同一父模板上。我正在使用@Input批注与service（作为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时，传递数据

Answer 3

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

一旦有了数据，就可以将其存储在localStorage中，并使用导航/打开新标签

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

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