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

Question

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

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 的值。我该怎么办？

Answer 1

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() {
  }

}

1. 如果组件没有父/子关系，则可以使用共享服务，例如 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

Answer 2

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

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

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

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

This link will be helpful.