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

Posted

技术标签:

【中文标题】如何将变量从 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.

【讨论】:

以上是关于如何将变量从 ts 文件传输到另一个 angular的主要内容,如果未能解决你的问题,请参考以下文章

如何将数据模态.ts注入到另一个

Angular5:将变量从一个组件传递到另一个打字稿文件

如何轻松地将变量从一个视图传递到另一个视图?

从一个.ts文件到另一个文件的简单模块导入

如何将类成员变量传递给另一个组件角度?

如何使用dto和C#窗口形式将信息从一种形式传输到另一种形式?