如何将变量从 ts 文件传输到另一个 angular

Posted 2023-03-13

【中文标题】如何将变量从 ts 文件传输到另一个 angular

【英文标题】：How to transfer variables from a ts fie to another, angular

【发布时间】：2020-09-15 23:06:58

【问题描述】：

我在函数中定义了一个属性

evs: string
...
openArticle(url)
    this.evs = url
    console.log(this.evs)
    this.navCtrl.navigateForward('/url-page')

  

我试图将“this.evs”的值传递给另一个 ts 文件并使用它的值，但我不知道该怎么做。我试着像这样导出它。

export const webpage = this.evs

但是 this.evs 在有人执行 openArticle 函数广告之前没有任何价值，所以我不断收到错误消息。 "无法读取未定义的属性 'evs'"

我需要做的是将变量转移到“url-page”页面并仅在调用 openArticle 函数后使用 this.evs 的值。我该怎么办？

【问题讨论】：

这能回答你的问题吗？ Changing text and setting a default

***.com/questions/62062889/…

【参考方案1】：

如果组件有父/子关系，您可以通过@Inpput() 和@Output() 装饰器在它们之间共享数据。

使用 @Input() 从父级共享数据到子级：

<h3>Parent Component</h3>

<label>Parent Component</label>c
<input type="number" [(ngModel)]='parentValue'/>

<p>Value of child component is: </p>
<app-child [value]='parentValue'></app-child>

在子组件中，'parentValue' 可以接收为：

import  Component, OnInit, Input  from '@angular/core';

@Component(
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
)
export class ChildComponent implements OnInit 

  @Input() value: number;
  constructor()  

  ngOnInit() 
  

现在，在从 Child 向 Parent 发送数据的情况下，我们可以使用 @Output() 事件发射器。所以父母有一个功能来接收孩子发出的数据：

parent-app.component.html 
    <app-child [value]="parentValue" (childEvent)="childEvent($event)"></app-child>

parent-app.component.ts

childEvent(event) 
console.log(event);


And, the child.component.ts would look like :

import  Component, OnInit, Input, Output, EventEmitter  from '@angular/core';

@Component(
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
)
export class ChildComponent implements OnInit 

  @Input() PData: number;
  @Output() childEvent = new EventEmitter();
  constructor()  
  onChange(value) 
    this.childEvent.emit(value);
  

  ngOnInit() 
  

如果组件没有父/子关系，则可以使用共享服务，例如 SharedService，它有一个 BehavioralSubject，它从任一组件发出值，然后另一个组件可以捕获更改的值。李>

例如：

import  Injectable  from '@angular/core';
import  BehaviorSubject  from "rxjs/BehaviorSubject";

@Injectable()
export class SharedService 

  comp1Val: string;
  _comp1ValueBS = new BehaviorSubject<string>('');

  comp2Val: string;
  _comp2ValueBS = new BehaviorSubject<string>('');

  constructor() 
    this.comp1Val;
    this.comp2Val;

    this._comp1ValueBS.next(this.comp1Val);
    this._comp2ValueBS.next(this.comp2Val);
  

  updateComp1Val(val) 
    this.comp1Val = val;
    this._comp1ValueBS.next(this.comp1Val);
  

  updateComp2Val(val) 
    this.comp2Val = val;
    this._comp2ValueBS.next(this.comp2Val);
  

和component1如下：

import  Injectable  from '@angular/core';
import  BehaviorSubject  from "rxjs/BehaviorSubject";

@Injectable()
export class SharedService 

  comp1Val: string;
  _comp1ValueBS = new BehaviorSubject<string>('');

  comp2Val: string;
  _comp2ValueBS = new BehaviorSubject<string>('');

  constructor() 
    this.comp1Val;
    this.comp2Val;

    this._comp1ValueBS.next(this.comp1Val);
    this._comp2ValueBS.next(this.comp2Val);
  

  updateComp1Val(val) 
    this.comp1Val = val;
    this._comp1ValueBS.next(this.comp1Val);
  

  updateComp2Val(val) 
    this.comp2Val = val;
    this._comp2ValueBS.next(this.comp2Val);
  

组件 2：

import  Component, AfterContentChecked  from '@angular/core';
import  SharedService  from "../../common/shared.service";

@Component(
  selector: 'app-component2',
  templateUrl: './component2.component.html',
  styleUrls: ['./component2.component.css']
)
export class Component2Component implements AfterContentChecked 

  comp1Val: string;
  comp2Val: string;

  constructor(private sharedService: SharedService) 
    this.sharedService.comp2Val = "Component 2 initial value";
  

  ngAfterContentChecked() 
    this.comp1Val = this.sharedService.comp1Val;
  

  addValue(str) 
    this.sharedService.updateComp2Val(str);
  

您可以找到更多关于不同类型主题的信息here

【讨论】：

我需要将 evs 的值从 ts 文件转移到不同页面但同一个项目中的另一个单独的 ts 文件。我正在使用 ionic 创建这个应用程序，我有两个完全不同的页面，我需要将 env 的值从一个页面的 ts 文件传输到另一个页面的 ts 文件。 @Gauri Kesava Kumar

请看这个会回答你的问题。我们可以将 Navigationextras 作为参数传递，因此您可以将 this.evs 与 navigateForward 方法一起传递：forum.ionicframework.com/t/…

【参考方案2】：

据我了解，您正在尝试在两个组件之间共享数据。 因此，请根据您的要求选择其中之一。

父母对孩子：通过 Input() 共享数据。

子级到父级：通过 Output() 和 EventEmitter 共享数据。

不相关的组件：与服务共享数据。

This link will be helpful.