Esta es una discusión algo abierta, pero tengo mucha curiosidad por pasar datos dinámicamente de un componente a otro.
Sé que se puede hacer usando el decorador @Input() . Pero tiene sus desventajas, como que no puede usar el botón Atrás en su navegador. Porque si lo hace, entonces retrocederá una página entera. No funcionará en el método Parent-Child porque estamos usando ng-If para ocultar las directivas secundarias en una página y no actualizará el contenido dinámicamente a menos que vuelva a cargar esa página. Y cuando vuelves a cargar esa página, pierdes el estado actual de la interfaz de usuario.
Si los datos son estáticos, entonces no hay absolutamente ningún problema, pero cuando son dinámicos e intentas pasar los datos, se muestran como undefined .
Agradecería cualquier sugerencia sobre cómo sería capaz de lograr eso.
Otra forma es usando un servicio . Tienes que usar el servicio como un "almacén" de tus valores de datos:
ng gs MyServiceName --skip-TestsUna vez creado, comprobar que se ha decorado como se indica en root:
@Injectable({ providedIn: 'root', }) export class MyServiceNameService { .... private _myVariable: string; get myVariable(){ return _myVariable; } set myVariable(newValue: string){ this._myVariable = newValue; } constructor(){ _myVariable = "exampletest"; } ... import { MyServiceNameService } from '../../services/my-service-name.service'; ... constructor( private myServiceNameService : MyServiceNameService ) { } ...por ejemplo: en componentes:
let myVariable:string; .... getNewValue(){ myVariable = this.myServiceNameService.myVariable; } setNewValue ( newValue: string) { this.myServiceNameService.myVariable(newValue); }Podría haber varias formas aquí:
Puede crear un servicio angular (use la anotación @Injectable() para crear el servicio). El servicio angular sigue el patrón de diseño singleton y se puede compartir entre varias páginas de su aplicación. Donde sea que lo necesite, simplemente inyecte ese servicio y podrá acceder a todas las propiedades/métodos.
Enlace cómo crear un servicio angular -
Puede usar el concepto redux y crear una tienda que tenga datos y luego esos datos podrían ser accesibles en todas las páginas. NgRx es la mejor biblioteca con Angular para crear almacenamiento y acceder a datos donde sea necesario. enlace ngrx -
Puede usar la biblioteca RxJs para compartir datos entre componentes del mismo nivel.
enlace rxjs -
Use un servicio compartido y cree un observable dentro del servicio, luego inyecte este servicio a los componentes que necesitan acceder a estos datos compartidos y cree una suscripción en cada componente. Cada vez que los datos en el observable cambien, los componentes suscritos serán notificados.