如何在Angular2中使用另一个组件中的变量

Posted 2023-02-23

【中文标题】如何在Angular2中使用另一个组件中的变量

【英文标题】：How to use a variable from a component in another in Angular2

【发布时间】：2017-06-25 03:32:36

【问题描述】：

我想知道是否可以将一个组件中的变量值使用到另一个组件中，而不必使用第一个组件的模板，只需要变量的值即可。有可能吗？

【问题讨论】：

angular.io/docs/ts/latest/cookbook/component-communication.html

你可以在一个组件中写一个获取值的方法在另一个组件中使用它

本例中不是使用主组件中的子组件html模板吗？正如我所说，我只需要一个变量值。

@yala ramesh 我认为这正是我所需要的，你能发布一个如何获得价值的小例子吗？

【参考方案1】：

转到您的 app.module.ts 并创建您想要与其他类一起继承的组件的提供者：

然后转到您想要访问该变量的类，并将组件导入该类：

制作它的构造函数：

并愉快地访问变量：

【讨论】：

您好，如果这个 apiEndPoint 没有设置为某个值，而是通过数据库更改为某个值怎么办？

【参考方案2】：

可以，您可以使用@Input() 方法或使用如下所示的 write get 方法

export class Demo 
    const sum = 10;

    get SumValue() 
        return this.sum;
    

---

导入-->演示

export class Demo2 
   private sum: number;
   this.sum = Demo.SumValue();

【讨论】：

还有一件事，当组件 1（本例中为 Demo）中的变量已经定义时，这很有效，在这种情况下，您在声明它时将其定义为 '10'，但是如果它没有被定义，你必须先在 Demo 中做一些事情来定义它。因为在这种情况下，当你从 Demo2 调用它时，它被认为是未定义的。

如果我不知道具有必要变量的类的名称该怎么办？它可以是 Demo、Demo3、Demo4。例如，如果我有三个组成不同表格的组件，并且我想制作呈现分页编号的唯一组件。而且这个分页块对表格一无所知。

@Radren 你找到解决方案了吗？

@mhisham，对不起，已经不记得了，那是不久前的事了 :)

你怎么能只做Demo.SumValue();这当函数 SumValue() 甚至不是静态的时候？

【参考方案3】：

我正在开发一个东西，我面临着同样的挑战。 我的方法。

我有两个不同的组件和一个服务。

loginComponent、headerCompnent 和 loginauth 服务。

    validateUser(name,pass)

   this.loginStatus = this.loginauth.validateUser(name,pass);

   if(this.loginStatus) this.route.navigate(['/welcome']);
   else this.route.navigate(['/login']);

  

image from LoginComponent

我想在 headerComponent 中使用“loginStatus”。

this.loginauth.validateUser(name,pass); loginauth 是其中的服务和 validateUser(...) 方法。

所以我在服务中创建了一个 static 变量，并将该服务注入到两个组件中，通过在 headerComponent 中注入相同的服务，我能够检索到该服务的值静态变量。

在服务中，根据您的要求创建和初始化它。

static loginFlag = false;

loginAuth service img

在标题组件中。

导入该服务并使用类名访问该静态变量。

 LoginAuthService.loginFlag

headerComponent img

【参考方案4】：

你可以使用构造函数。

例如我想在子组件中使用父组件的“消息”变量。

export class ParentComponent 

  message: string;

  constructor()
    this.message = "Hello"
  

在子组件下面你应该导入属于父组件的类。并在子组件中调用。

import  ParentComponent  from 'src/app/app.parentcomponent';

export class ChildComponent implements OnInit 

  message2 = new ParentComponent;

  message3 = this.message2.message;

  constructor()  

  ngOnInit(): void 
  

最后 message3 等于 "Hello"。