Angular // 带有图表的组件图表 js，直到我刷新页面

编程问答 2022-05-16

问题描述

我正在处理一个 Angular (11) 项目，但我坚持尝试：

在我的应用程序中有一个侧边栏菜单，当我单击菜单项时，routerLink 会在详细信息组件页面上发送给我。这个详细信息组件页面有另一个组件，它是用图表 js 制作的图表（它是 linebar.component.ts）。

我的问题是，当我单击菜单项并显示详细信息组件时，在我刷新页面之前根本不会显示行栏组件。我认为这是由于 API 的异步性质造成的。任何人都知道如何解决它？提前致谢

details.component.ts

import { Component,OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DetailsNavbarItemsService } from '../details-navbar-items.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-details',templateUrl: './details.component.html',styleUrls: ['./details.component.scss']
})
export class DetailsComponent implements OnInit {

  collapsed = true;

  data: any;

  id= this.router.snapshot.params.areaid;

  constructor(private route: Router,private router: ActivatedRoute,private detailsNavbarItemsData: DetailsNavbarItemsService) { }

  ngOnInit() {

    this.route.routeReuseStrategy.shouldReuseRoute = () => {
      // do your task for before route

      return false;
    }

    this.detailsNavbarItemsData.getDetailsNavbarItems(this.id).subscribe((result)=>{
      console.log(result);
      this.data = result;
    });

  }

}

linebar.component.ts

import { Component,OnInit } from '@angular/core';
import { Chart } from 'node_modules/chart.js';
import { ActivatedRoute } from '@angular/router';
import { AppService } from '../../app.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-linebar',templateUrl: './linebar.component.html',styleUrls: ['./linebar.component.scss']
})
export class LinebarComponent implements OnInit {

  id= this.router.snapshot.params.id;



  constructor(private route: Router,private appService: AppService) { }

  ngOnInit() {

    var ctx = document.getElementById('myChart');

    var mixedChart = new Chart(ctx,{

      type: 'bar',data: {
        labels: ["30.09.20","30.06.20","30.03.20","30.12.19",],datasets: [{
          label: 'Value',data: [3000,1500,6000,4500],backgroundColor: 'rgba(101,248,12,1)',hoverBackgroundColor: 'rgba(101,0.2)',barPercentage: 0.4,borderColor: '#65F80C',borderWidth: 1
        },{
          label: 'Hard Limit',data: [5250,5250,5250],pointBorderWidth: 0,pointBorderColor: 'rgba(248,62,0)',pointBackgroundColor: 'rgba(248,backgroundColor: 'rgba(248,borderColor: '#F80C3E',borderWidth: 1,type: 'line',// this dataset is drawn on top
          order: 2
        }],},options: {
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMin: 0,suggestedMax: 6000,}],xAxes: [{
              gridLines: {
                display:false
            }
          }]
        },}

    });

  }

}

details-navbar-items.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class DetailsNavbarItemsService {

  url="https://this-is-the-API-url/"

  constructor(private http: HttpClient) { }

  getDetailsNavbarItems(id) {
    return this.http.get(this.url + id);
  }

}

details.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-lighter">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li *ngFor="let item of data" class="nav-item">
        <a class="nav-link" href="#">{{ item.name }}</a>
      </li>
    </ul>
  </div>
</nav>


    <div class="card"><app-linebar></app-linebar></div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangular-routerlinkapiapitypescripttypescript