0
139
Vistas¿Cómo pasar datos a cualquier componente independientemente de child-parent en angular?
Estoy tratando de pasar datos a un componente, pero recibo un error.
Property 'doSomethingX' does not exist on type 'AppComponent'.ngtsc(2339) app.component.ts(5, 12): Error occurs in the template of component AppComponent.Aquí lo que hice.
Lo que quiero lograr: estoy desarrollando una aplicación/sitio web en el que, si el usuario no inicia sesión, debería aparecer una ventana emergente que dirija al usuario a la pantalla de inicio de sesión. requireloginregister es un componente al que se dirigirá al usuario. Ahora quiero que este componente esté activo/visible si alguien hace clic en una función que requiere autenticación.
Lo que hice:
En un componente, para agregar el artículo a la lista de deseos, el usuario debe iniciar sesión/registrarse primero. Entonces, cuando el usuario hace clic en el botón del elemento deseado, primero verifico si el usuario ha iniciado sesión o no. Si no ha iniciado sesión, estoy enviando una señal al componente requireloginregister para que sea visible.
@Output() public eventName = new EventEmitter(); this.eventName.emit(true); // "true" is signaly en el componente requireloginregister estoy recibiendo esta señal como
<app-requireloginregister (eventName)="doSomethingX($event)" ></app-requireloginregister>Dentro del componente requireloginregister :
doSomethingX(e) { alert("Signal received" + e); }Donde ocurre el problema:
El problema ocurre cuando agrego una plantilla html a un archivo pp.component.html
<app-abovenav></app-abovenav> <app-nav></app-nav> <router-outlet></router-outlet> <app-footer></app-footer> <app-requireloginregister (eventName)="doSomethingX($event)" ></app-requireloginregister>La razón por la que quiero pasar datos sin una relación padre/hijo es que hay muchos componentes en mi aplicación que primero verifican si el usuario no ha iniciado sesión, todos estos componentes tendrán que pasar una señal para requerir el componente de registro de inicio de sesión.
Cualquier ayuda es apreciada.
1 Respuestas
Responde la pregunta0
Finalmente mi problema se resolvió. Si alguien más tiene este tipo de problema de comunicación, siga los pasos a continuación. 
Créditos Simplilearn
Paso 01:
Crear un servicio usando
ng g servicio "su-servicio-nombre"
Paso 02:
En su archivo service.ts, obtenga la instancia del componente al que desea enviar la señal. En mi caso, el nombre del componente era requireloginregister
import {RequireloginregisterComponent} from "../app/components/requireloginregister/requireloginregister.component";Luego creo una instancia de RequireloginregisterComponent en mi clase de servicio.
r = new RequireloginregisterComponent();Ahora que tengo la referencia, puedo llamar a cualquier método público definido dentro de la clase RequireloginregisterComponent .
Último paso:
Componente desde donde se quiere enviar la señal. Simplemente importe su servicio dentro de su componente. En mi caso, llamé a mi servicio como "InvokerService" para
import { InvokerService } from './../../invoker.service';Ahora defina su servicio dentro del constructor también
constructor( private invokerService:InvokerService) { }use la variable invocadorService para llamar al método dentro de su servicio, que está vinculado a su otro componente, al que desea pasar la señal.
RequireloginregisterComponent
Quiero enviar datos/señales a esta clase/componente
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-requireloginregister', templateUrl: './requireloginregister.component.html', styleUrls: ['./requireloginregister.component.css'] }) export class RequireloginregisterComponent implements OnInit { constructor() { } ngOnInit(): void { } message(message:any) { alert("Message Received: " + message;) } }Mi clase de servicio
import { Injectable } from '@angular/core'; import {RequireloginregisterComponent} from "../app/components/requireloginregister/requireloginregister.component"; @Injectable({ providedIn: 'root' }) export class InvokerService { constructor() { } r = new RequireloginregisterComponent(); messageTranspoter(msg:any){ this.r.message(msg); } }Estoy enviando datos/señales desde este componente/clase
import { InvokerService } from './../../invoker.service'; import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-productdetail', templateUrl: './productdetail.component.html', styleUrls: ['./productdetail.component.css'], encapsulation: ViewEncapsulation.None }) export class ProductdetailComponent implements OnInit { constructor(private invokerService:InvokerService) { } sendMessage(){ this.invokerService.requireAuth(); } }