如何在 angular 中将数据传递给任何组件，而不考虑父子关系？

Question

我正在尝试将数据传递给组件，但出现错误。

Property 'doSomethingX' does not exist on type 'AppComponent'.ngtsc(2339)
app.component.ts(5, 12): Error occurs in the template of component AppComponent.

这是我所做的。

我想达到的目标： 我正在开发一个 app/website，如果用户没有登录，应该会出现一个弹出窗口，将用户引导至登录屏幕。 requireloginregister 是用户将被定向到的组件。现在，如果有人单击需要身份验证的功能，我想制作此组件 active/visible。

我做了什么：

在组件中，要将项目添加到愿望清单，用户必须先 login/register。因此，当用户单击愿望项按钮时，首先我会检查用户是否已登录。如果未登录，我将向 requireloginregister 组件发送信号以使其可见。

  @Output() public eventName = new EventEmitter();
  this.eventName.emit(true); // "true" is signal

在 requireloginregister 组件上，我收到此信号为

<app-requireloginregister (eventName)="doSomethingX($event)" ></app-requireloginregister>

内部 requireloginregister 组件：

doSomethingX(e)
{
alert("Signal received" + e);
}

出现问题的地方：

当我将 html 模板添加到 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>

我想在没有 child/parent 关系的情况下传递数据的原因是，我的应用程序中有许多组件首先检查用户是否未登录，所有这些组件都必须传递一个信号到需要登录注册 组件。

感谢任何帮助。

Answer 1

我的问题终于解决了。如果其他人遇到此类通信问题，请按照以下步骤操作。学分 Simplilearn

步骤 01：

使用

创建服务

ng g service "your-service-name"

步骤 02：

在您的 service.ts 文件中获取您要向其发送信号的组件的实例。在我的例子中，组件名称是 requireloginregister

import {RequireloginregisterComponent} from "../app/components/requireloginregister/requireloginregister.component";

然后我在我的服务中创建一个 RequireloginregisterComponent 实例 class。

  r = new RequireloginregisterComponent();

现在我有了引用，我可以调用 RequireloginregisterComponent class.

中定义的任何 public 方法

最后一步：

您要发送信号的组件。 只需在您的组件中导入您的服务。就我而言，我将我的服务称为“InvokerService”，所以

import { InvokerService } from './../../invoker.service';

现在也在构造函数中定义您的服务

constructor( private invokerService:InvokerService) { }

使用 invokerService 变量在您的服务中调用方法，该服务链接到您要将信号传递给的其他组件。

需要登录注册组件

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;)
  
  }
  
 
}

我的服务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);
  }
}

我正在从这个component/class

发送data/signal

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();

   }
}

如何在 angular 中将数据传递给任何组件，而不考虑父子关系？

How to pass data to any component irrespective of child-parent in angular?

javascript

angular