Question

我有Directive Subscription用于调整图表大小

import {Directive, ElementRef, HostListener, Input, OnDestroy, OnInit} from '@angular/core';
import {Subscription} from 'rxjs/Subscription';
import echarts from 'echarts';
import 'echarts/theme/macarons';
import {ChartService} from '../service/chart/chart.service';

@Directive({selector: '[appECharts]'})
export class EChartsDirective implements OnInit, OnDestroy {
  element: ElementRef;
  subscription: Subscription;
  @Input() eChartsOptions: any;
  @Input() theme = 'macarons';
  private chart;

  constructor(element: ElementRef, private chartsService: ChartService) {
    this.element = element;
  }

  ngOnInit() {
    this.subscription = this.chartsService.chartChange.subscribe((str) => {
      this.resizeChart(str);
    });
    this.chart = echarts.init(this.element.nativeElement, this.theme);
    if (this.eChartsOptions) {
      this.chart.setOption(this.eChartsOptions);
    }
  }

  ngOnDestroy() {
    if (this.chart) {
      this.chart = null;
    }
    this.subscription.unsubscribe();
  }

  resizeChart(str: string) {
    console.log('resize from=' + str);
    setTimeout(() => {
      if (this.chart) {
        console.log('resize');
        this.chart.resize();
      }
    }, 500);
  }

  @HostListener('window:resize')
  onResize() {
    this.resizeChart('window');
  }
}

的ChartService：

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Injectable()
export class ChartService {
  chartChange = new Subject<string>();
  orderChartChanged = new Subject<any[]>();
  private orderCharts: any[];

  setChartData(orderCharts) {
    this.orderCharts = orderCharts;
    this.orderChartChanged.next(this.orderCharts);
  }

  updateCharts(srt: string) {
    console.log('from=' + srt);
    this.chartChange.next(srt);
  }
}

我调用updateCharts方法

的组件

import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {ChartHttpService} from '../../shared/service/chart/chart-http.service';
import {MdSnackBar} from '@angular/material';
import {Subscription} from 'rxjs/Subscription';
import {ChartService} from '../../shared/service/chart/chart.service';
import echarts from 'echarts';
import 'echarts/theme/macarons';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnDestroy, OnInit {
  chartSubscription: Subscription;
  @ViewChild('chart1') element: ElementRef;
  chart2;

  constructor(private chartService: ChartService,
              private chartHttpService: ChartHttpService,
              public snackBar: MdSnackBar) {
  }

  ngOnInit() {
    const chart = echarts.init(this.element.nativeElement, 'macarons');
    this.chartSubscription = this.chartService.orderChartChanged
      .subscribe(
        (response: any) => {
          const option = response.orderAmount;
          chart.setOption(option);
          setTimeout(() => {
            chart.resize();
          }, 500);
          this.chart2 = option;
          this.chartService.updateCharts('home');
        }
      );
    this.chartHttpService.orderCharts(this.snackBar);
  }

  ngOnDestroy() {
    this.chartSubscription.unsubscribe();
    this.chart2 = null;
  }

  onResize() {
    this.chartService.updateCharts('btn');
  }

}

ChartHttpService：

import {Injectable} from '@angular/core';
import {MdSnackBar} from '@angular/material';
import {HttpClient} from '@angular/common/http';

import {TranslateService} from '@ngx-translate/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
import {SnackBarUtils} from '../snack-bar-utils';
import {environment} from '../../../../environments/environment';
import {ChartService} from './chart.service';

@Injectable()
export class ChartHttpService {
  private static orderCharts = 'json/chart/ordersChart';

  constructor(private http: HttpClient,
              private chartService: ChartService,
              private translate: TranslateService) {
  }

  orderCharts(snackBar: MdSnackBar) {
    const url = environment.apiUrl + ChartHttpService.orderCharts;
    this.http.get(url)
      .catch(error => {
        return Observable.throw(error);
      })
      .subscribe(
        response => this.chartService.setChartData(response),
        error => SnackBarUtils.showLocalizedSnackBar(this.translate, snackBar, 'msg.error')
      );
  }
}

和html组件：

<div class="row">
  <div class="col-lg-6 col-md-6 col-xs-12 col-sm-6">
    <md-card>
      <div class="box-header">Base Line</div>
      <div #chart1 style="height: 300px;"></div>
    </md-card>
  </div>
  <div class="col-lg-6 col-md-6 col-xs-12 col-sm-6">
    <md-card>
      <div class="box-header">Stacked Line</div>
      <ng-container *ngIf="chart2">
        <div appECharts [eChartsOptions]="chart2" style="height: 300px;"></div>
      </ng-container>
    </md-card>
  </div>
  <button (click)="onResize()">Resize</button>
</div>

问题是，当我在浏览器中按refresh或f5时updateCharts方法调用HomeComponent但问chartChange主题无法正常工作我想，因为EChartsDirective订阅中没有调用方法resizeChart，这个问题仅在refresh或f5之后。如果我点击Resize btn，一切正常。

所以我不知道为什么，subscription EChartsDirective resizeChart在refresh或f5之后没有调用chart2。

为什么会发生这种想法？

更新：仅在问题init时出现问题，我在HomeComponent -> ngOnInit中手动添加了setTimeout(() => { chart.resize(); }, 500); ngOnInit() { this.chart = echarts.init(this.element.nativeElement, this.theme); if (this.eChartsOptions) { this.chart.setOption(this.eChartsOptions); } this.subscription = this.chartsService.chartChange.subscribe((str) => { this.resizeChart(str); }); }（无指令），并在我调用

时添加了{1}}

browser refresh

它有效，但当然只有Subscription问题，但仍然存在）

UPDATE2：改为：

F5

没有改变

在from=home-123或from=xxx chart.service.ts:16 resize from=xxx echarts.directive.ts:37 resize echarts.directive.ts:40

之后进行记录

UPDATE TestingTool_WeeklyReports
SET InReleasenotes  = CASE WHEN u.functionname IS NULL THEN 'NO' ELSE 'YES' END
FROM TestingTool_WeeklyReports T1
OUTER APPLY (SELECT t2.functionname
             FROM TestDS_DSReleaseNotes T2
             WHERE T1.Datasourcename = t2.functionname) u

单击以调整大小btn

后记录

import sympy as sp
sp.init_printing() # math as latex
from IPython.display import display
z = sp.Symbol('z')
F = sp.Function('F')(z)
F_ = sp.Derivative(F, z)
equation = sp.Eq(F**2 + 1 - F_, 0)
display(equation)

Answer 1

 ngOnInit() {
    this.subscription = this.chartsService.chartChange.subscribe((str) => {
      this.resizeChart(str);
    });
    this.chart = echarts.init(this.element.nativeElement, this.theme);
    if (this.eChartsOptions) {
      this.chart.setOption(this.eChartsOptions);
    }
  }

您在订阅this.chart后设置Subject ，而在resizeChart中检查this.chart是否已定义。它可能会因为它在那时仍为空而失败。在订阅this.chart之前尝试设置Subject。

Answer 2

好吧所以我添加this.resizeChart（str）;在EChartsDirective的ngOnInit方法中，在每个图表初始化之后，我有调整大小的效果，所以它对我有用

Angular4 ngOnInit rxjs /主题不起作用

2 个答案: