如何将变量从一个ts _ fie传递到另一个ts_fie，angular
如何将变量从一个ts _ fie传递到另一个ts_fie，angular
提问于 2020-05-28 23:04:53
我在函数中定义了一个属性
evs: string
...
openArticle(url){
this.evs = url
console.log(this.evs)
this.navCtrl.navigateForward('/url-page')
}我试图将'this.evs‘的值传递给另一个ts文件并使用它的值，但我不知道该怎么做。我试着这样输出它。
export const webpage = this.evs但是在有人执行openArticle函数ad之前，this.evs没有任何价值，所以我一直收到这个错误。“无法读取未定义的属性'evs‘”
我需要做的是将变量传递给'url- page‘页面，并仅在调用openArticle函数后才使用this.evs的值。我该怎么做呢？
回答 2
Stack Overflow用户
发布于 2020-05-29 00:10:07
据我所知，您正在尝试在两个组件之间共享数据。因此，请根据您的需求选择其中之一。
- 父项到子项:通过Input()共享数据。
- 子项到父项:通过Output()和
- 组件共享数据。
Stack Overflow用户
发布于 2020-05-29 02:21:23
- 如果组件具有父/子关系，则可以通过@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() {
}
}- 如果组件没有父/子关系，则可以使用共享服务，例如具有BehavioralSubject的SharedService，它会从任何一个组件发出值，然后另一个组件可以捕获更改后的值。
例如：
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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62068002
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号