如何将变量从 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的主要内容,如果未能解决你的问题,请参考以下文章