0
141
VisualizaçõesHow to pass data to any component irrespective of child-parent in angular?
I am trying to pass data to a component, but i am getting error.
Property 'doSomethingX' does not exist on type 'AppComponent'.ngtsc(2339)
app.component.ts(5, 12): Error occurs in the template of component AppComponent.
Here what i did.
What I want to achieve: I'm developing an app/website in which if the user does not log in, a popup should appear directing the user to the log-in screen. requireloginregister is a component where user will be directed to. Now I want to make this component active/visible if someone clicks on a feature that requires authentication.
What I did:
In a component, to add the item to wish list, user must login/register first. So when user click on the wish item button, first i am checking if user is logged in or not. If not logged-in i am sending signal to requireloginregister component to become visible.
@Output() public eventName = new EventEmitter();
this.eventName.emit(true); // "true" is signal
and on requireloginregister component i am receiving this signal as
<app-requireloginregister (eventName)="doSomethingX($event)" ></app-requireloginregister>
Inside requireloginregister component:
doSomethingX(e)
{
alert("Signal received" + e);
}
Where problem occurs:
The problem occurs when i add html template to app.component.html file
<app-abovenav></app-abovenav>
<app-nav></app-nav>
<router-outlet></router-outlet>
<app-footer></app-footer>
<app-requireloginregister (eventName)="doSomethingX($event)" ></app-requireloginregister>
The reason I want to pass data without child/parent relationship is that, there are many components in my application which first check if user is not logged in, all of these components will have to pass a signal to requireloginregister component.
Any help is appreciated.
1 Respostas
Responde à pergunta0
Finally my issue resolved. If anyone else having this communication type of issue, follow below steps.
Credits Simplilearn
Step 01:
Create a service using
ng g service "your-service-name"
Step 02:
In your service.ts file get the instance of the component that you want to send signal to. In my case, component name was requireloginregister
import {RequireloginregisterComponent} from "../app/components/requireloginregister/requireloginregister.component";
Then I create an instance of RequireloginregisterComponent in my service class.
r = new RequireloginregisterComponent();
Now I have the reference, I can call any public method defined inside RequireloginregisterComponent class.
Last Step:
Component from where you want to send the signal. Simply import your service inside your component. In my case, I called my service as "InvokerService" so
import { InvokerService } from './../../invoker.service';
Now define your service inside constructor as well
constructor( private invokerService:InvokerService) { }
use invokerService variable to call method inside your service, which is linked to your other component, you want to pass signal to.
RequireloginregisterComponent
I want to send data/signal to this class/component
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;)
}
}
My Service class
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);
}
}
I am sending data/signal from this component/class
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();
}
}