在两个组件之间共享数据 Angular 7

Question

Hi all and thanks for your time!

I am creating a website with angular 7 and routing. In one component, that shows home(default view), i have an input that asks person for name.

I want to pass this data to my other component. After googling for a long time, i found out i should use services but is it really only option to share data? Anyone got an example of this?

ps: One answer on stackoverflow says "you can use a shared service(using observable) or you can use ngrx/store."

Answer 1

You can learn angular features from technical documentation https://angular.io/docs

You can share data on a couple of ways depending on expectations and logic:

• Parent/child components can use @Input in child component if you want to send object from parent to child component, @Output if you want to send an event from child to parent (this event can bring data)
• You can use event emitter with @Injectable service in the same angular module
• You can use local storage and session storage if you want to save data on a client
• You can use HTTP or WebSockets if you want to save data on a server

Answer 2

For now, I managed to do it using local storage so it works. Still i will need to dive deep into passing data these days to understand it better when it comes to getter and setter. for now it looks like this: component 1 HTML:

<button (click)="saveData($event)" class="btn btn-outline-secondary" type="button"
            id="button-addon2">Send</button>

component 1 ts:

 saveData(){ localStorage.setItem('visitor', this.visitor);}

component 2 ts:

visitor = localStorage.getItem('visitor');

maybe someone will find it to be useful.