[英]How to export a variable withinin a class and function to another component in Angular?
I have a component named flow.component.ts
like this:我有一个名为
flow.component.ts
的组件,如下所示:
var rsi_result: number[];
@Component({
selector: 'flow-home',
templateUrl: './flow.component.html',
styleUrls: ['./flow.component.scss'],
host: {
'[@flyInOut]': 'true',
'style': 'display: block;'
},
animations: [
flyInOut(),
expand()
]
})
export class FlowComponent implements AfterViewInit {
setRsi(selectedValue){
console.log('The RSI period is:' , selectedValue);
periodd = selectedValue;
this.label2 = ' نام اندیکاتور: RSI';
this.label3 = ' دوره زمانی: ' + periodd + 'روزه';
rsi_result = rsi({period: periodd, values: pricess});
console.log('The RSI result is:' , rsi_result);
}
}
export const RSI_RESULT = rsi_result;
The code works well and I can see the result of this line of code in my console console.log('The RSI result is:' , rsi_result);
代码运行良好,我可以在控制台
console.log('The RSI result is:' , rsi_result);
看到这行代码console.log('The RSI result is:' , rsi_result);
but it seems the export
line out of the class doesn't work and I can't use RSI_RESULT
in other components and get undefined RSI_RESULT
error message!但似乎类的
export
行不起作用,我无法在其他组件中使用RSI_RESULT
并收到undefined RSI_RESULT
错误消息! Also when I write rsi_result
or RSI_RESULT
in console I get the same undefined error!此外,当我在控制台中写入
rsi_result
或RSI_RESULT
,我得到相同的未定义错误!
How is it possible when this line of code console.log('The RSI result is:' , rsi_result);
这行代码
console.log('The RSI result is:' , rsi_result);
works well and I can see the rsi_result
in the console but when I type it by hand I get undefined error message?效果很好,我可以在控制台中看到
rsi_result
但是当我手动输入时,我收到未定义的错误消息?
EDITL编辑
I tried to create a service named ngx.service
with this content:我尝试使用以下内容创建一个名为
ngx.service
的服务:
import { Injectable } from '@angular/core';
var RSI_RESULT: number[];
var MACD_RESULT: number[];
@Injectable({
providedIn: 'root'
})
export class NgxService {
getRsiResult(){
return (RSI_RESULT);
}
getMacdResult(){
return (MACD_RESULT);
}
constructor() { }
}
Then edited the above code to :然后将上面的代码编辑为:
export class FlowComponent implements AfterViewInit {
macd_result: number[];
rsi_result: number[];
constructor(private dialog: MatDialog, private ngxService:NgxService) {
}
setRsi(selectedValue){
console.log('The RSI period is:' , selectedValue);
periodd = selectedValue;
this.label2 = ' نام اندیکاتور: RSI';
this.label3 = ' دوره زمانی: ' + periodd + 'روزه';
this.rsi_result = rsi({period: periodd, values: pricess});
console.log('The RSI result is:' , this.rsi_result);
}
}
But when I want to use rsi_result
in the following component named ngx-charts
I get the same error as before:但是当我想在以下名为
ngx-charts
组件中使用rsi_result
,我得到与以前相同的错误:
import { Component, OnInit } from '@angular/core';
import {MatDialog, MatDialogRef} from '@angular/material';
import { NewsComponent } from '../news/news.component';
import {NgxService} from '../services/ngx.service';
import { Mellat , Khodro, Shepna} from '../shared/stock_inf';
@Component({
selector: 'app-ngx-charts',
templateUrl: './ngx-charts.component.html',
styleUrls: ['./ngx-charts.component.scss']
})
export class NgxChartsComponent implements OnInit {
rsi_result: number[];
macd_result: number[];
constructor(public dialogRef: MatDialogRef<NgxChartsComponent> ,
private ngxService: NgxService) { }
ngOnInit() {
this.rsi_result = this.ngxService.getRsiResult(); //.subscribe(RSI_RESULT => this.rsi_result = RSI_RESULT);
this.macd_result = this.ngxService.getMacdResult(); //.subscribe(MACD_RESULT => this.macd_result = MACD_RESULT);
console.log(this.rsi_result);
}
// data goes here
public single = [
{
"name": " درصد سود",
"value": 69
},
{
"name": " درصد زیان",
"value": 31
},
];
newArray = Mellat.map((e, i) => ({
"name": (i + 1).toString(),
"value": e,
}));
newArray2 = this.rsi_result.map((e, i) => ({
"name": (i + 1).toString(),
"value": e,
}));
public multi = [
{
"name": "Mellat",
"series": this.newArray
},
{
"name": "RSI",
"series": this.newArray2
}
];
//{name: (i + 1).toString(), value: e.toString()}
view: any[];
// options for the chart
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'زمان';
showYAxisLabel = true;
yAxisLabel = 'قیمت';
timeline = true;
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};
// line, area
autoScale = true;
//pie
showLabels = true;
explodeSlices = false;
doughnut = false;
}
EDIT2:编辑2:
I reviewd my code again and noticed that I must delete var RSI_RESULT: number[];
我再次
var RSI_RESULT: number[];
了我的代码并注意到我必须删除var RSI_RESULT: number[];
and MACD_RESULT: number[];
和
MACD_RESULT: number[];
from my app and also replace this.rsi_result
lines to this.ngxService.RSI_RESULT
when my ngx.service.ts
file looks like this:从我的应用程序中,当我的
ngx.service.ts
文件如下this.ngxService.RSI_RESULT
时,还将this.rsi_result
行替换为this.ngxService.RSI_RESULT
:
import { Injectable } from '@angular/core';
import {Observable, of} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class NgxService {
RSI_RESULT: number[];
MACD_RESULT: number[];
getRsiResult(){ //: Observable<number[]>{
return (this.RSI_RESULT);
}
getMacdResult(){ //: Observable<number[]>{
return (this.MACD_RESULT);
}
constructor() { }
}
And the program works well by now!该程序现在运行良好!
Yo have to put your share info
in an service and inject that service into all your components.您必须将您的
share info
放入一个服务中,并将该服务注入到您的所有组件中。
export class FlowComponent implements AfterViewInit {
constructor(private readonly myService: MyService){}
setRsi(selectedValue){
console.log('The RSI period is:' , selectedValue);
periodd = selectedValue;
this.label2 = ' نام اندیکاتور: RSI';
this.label3 = ' دوره زمانی: ' + periodd + 'روزه';
this.myService.setRsi(rsi({period: periodd, values: pricess}));
console.log('The RSI result is:' , rsi_result);
}
}
// Other file
export class OtherComponent {
constructor(private readonly myService: MyService){}
getRsi(){
return this.myService.getRsi();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.