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

Question

I want to pass data on button click of parent component to child component and render child component as a separate page in angular 5 instead of rendering child component in parent's template.

Suppose, My child component is 'AstronautComponent' and when I add ,

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

this in parent template it is showing child template on same page instead of separate page.Actually I am able to get data from parent to child but on same parent template.I am using @Input annotation with service(as Observable).

Kindly Help.

Thanks

Answer 1

You can use the router to open child component in new page like:

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

and define its path in

app.module.ts to open child component like:

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

Answer 2

render child component as a separate page?

Then there is no parent child relationship

Have a parent component with router outlet

Parent.html

<router-outlet></router-outlet>

define routes for your 2 components with data

{ path: 'your _link', component: child_component, data: { ... any data } }

while navigating from component1 to component2 pass the data

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

Answer 3

You can possibly setup Angular routing defining your routes separately for both parent and astronaut . Please note these do not have any parent / child relationship anymore.

Once you have the data, you may store it in localStorage and navigate / open new tab using

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

The above statement will render another Angular application in the second tab with the astronaut component rendered. At this point of time in ngOnInit() , you may check the localStorage for the desired data, and if one is present, you can simply access it and show it in HTML as desired. This way, you no longer need an @Input() property.