Soy nuevo en angular y trato de compartir datos entre páginas al cargar la página principal, estoy usando formularios dinámicos angulares para crear páginas dinámicas. mi página principal consta de páginas de componentes secundarios que se cargan en la página principal, pero cuando los datos de mi página principal se pasan a la página secundaria utilizando proveedores en la carga de la página, los datos llegan al elemento secundario pero no los almacenan en la variable de la página secundaria

pagina principal:

 import { Component, Input, OnInit } from '@angular/core'; import { AppSelect } from '../component/multiselect.component'; @Component({ providers: [AppSelect], //child selector: 'app-hello', template: `<app-select></app-select>`, styles: [`h1 { font-family: Lato; }`], }) export class HelloComponent implements OnInit { array: any[] = ['1', '2', '3', '4', '5', '6']; constructor(private module: AppSelect //child) {} ngOnInit() { this.module.valuefrommainrpage(this.array); //value from here is sent to multiselect.component page } }

página secundaria multiselect.component:

 import { Component, VERSION } from '@angular/core'; @Component({ selector: 'app-select', template: ` <select multiple="multiple" name="" id="" style="width:300px;height:300px;"> <option *ngFor="let items of module" [value]="items">{{items}}</option> </select> <br> <button (click)="setvalue()">CLICK</button> <button (click)="console()">consolevalues</button>`, styles: [`h1 { font-family: Lato; }`], }) export class AppSelect { module: string[] = []; setvalue() { this.module = ['one', 'two', 'three', 'four', 'five']; } valuefrommainrpage(data) { //data is recievd from main page on ngOnInit of mainpage console.log(data); this.module = data; //data should be set here but doesnt } console() { console.log(this.module); } }

mi código stackblitz: compartir datos del componente principal al secundario

No entiendo cómo sucede esto, ya que recibo datos de la página principal pero no puedo almacenarlos en variables.