Angular 12 Chartjs - 图表仅出现在根页面上 - 路由问题？

问题描述

我有一个导航栏、一个侧边栏和一堆页面。

用户必须登录才能查看。

着陆页上的图表显示完美（网址以“'”结尾）。

任何其他页面上的图表都拒绝出现。我已将整个代码从工作组件复制粘贴到非工作组件。没有不同。仍然没有图表出现。

我最近在我的项目中添加了 HashLocationStrategy。

不久前 - 在添加此位置策略之前 - 图表适用于所有页面。我不能肯定地说，正是这个添加打破了图表。我只怀疑它与此添加有关，但是当我删除它时，图表仍然没有显示。所以也许我错了。

我已经在互联网上搜索了几天。我试过调试我自己的项目。任何地方都没有错误。

所以，不用多说，这是我的 app.module.ts：

import { NgModule } from '@angular/core';
import { browserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule,HTTP_INTERCEPTORS } from '@angular/common/http';

// used to create fake backend
import { fakeBackendProvider } from './_helpers';

import { AppRoutingModule } from './app-routing.module';
import { JwtInterceptor,ErrorInterceptor } from './_helpers';
import { AppComponent } from './app.component';
import { AlertComponent } from './_components';
import { HomeComponent } from './home';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { browserAnimationsModule } from "@angular/platform-browser/animations";
import { ToastrModule } from 'ngx-toastr';
import { SidebarModule } from './sidebar/sidebar.module';
import { NavbarModule } from './navbar/navbar.module';
import { OverviewComponent } from './pages/overview/overview.component';
import { MapSuburbComponent } from './pages/map-suburb/map-suburb.component';
import { SuburbOverviewComponent } from './pages/suburb-overview/suburb-overview.component';
import { LocationDetailsComponent } from './pages/location-details/location-details.component';
import { SettingsComponent } from './pages/settings/settings.component';
import { SupportComponent } from './pages/support/support.component';
import { AlertsComponent } from './pages/alerts/alerts.component';
import { ChartsModule } from 'ng2-charts';
import { NgApexchartsModule } from 'ng-apexcharts';
import { BillingComponent } from './pages/billing/billing.component';
import { NgCircleProgressModule } from 'ng-circle-progress';
import { HashLocationStrategy,LocationStrategy } from '@angular/common';
import { ShowHidePasswordModule } from 'ngx-show-hide-password';

@NgModule({
    imports: [
        browserModule,browserAnimationsModule,ReactiveFormsModule,HttpClientModule,ChartsModule,NgbModule,ToastrModule.forRoot(),NgApexchartsModule,ShowHidePasswordModule,SidebarModule,NavbarModule,NgCircleProgressModule.forRoot({
            // set defaults here
            radius: 100,outerstrokeWidth: 10,innerstrokeWidth: 10,outerstrokeGradient: true,outerstrokeColor: '#5bf8d3',outerstrokeGradientStopColor: '#5bcef8',animationDuration: 400,showZeroOuterstroke: true,innerstrokeColor: '#f2f3f5',backgroundstroke: "transparent",showUnits: false,space: 10
        }),AppRoutingModule

    ],declarations: [
        AppComponent,AlertComponent,BillingComponent,HomeComponent,OverviewComponent,MapSuburbComponent,SuburbOverviewComponent,LocationDetailsComponent,SettingsComponent,SupportComponent,AlertsComponent

    ],providers: [
        [{ provide: LocationStrategy,useClass: HashLocationStrategy }],{ provide: HTTP_INTERCEPTORS,useClass: JwtInterceptor,multi: true },useClass: ErrorInterceptor,// provider used to create fake backend
        fakeBackendProvider
    ],bootstrap: [AppComponent]
})
export class AppModule { };

我的 sidebar.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule,HashLocationStrategy,LocationStrategy } from '@angular/common';
import { RouterModule } from '@angular/router';
import { SidebarComponent } from './sidebar.component';

@NgModule({
    imports: [ RouterModule,CommonModule ],declarations: [ SidebarComponent ],exports: [ SidebarComponent ]
})

export class SidebarModule {
    providers: [
        {
          provide: LocationStrategy,useClass: HashLocationStrategy,}
      ]
}

和我的 navbar.module.ts

import { NgModule } from '@angular/core';
import { CommonModule,LocationStrategy } from '@angular/common';
import { RouterModule } from '@angular/router';
import { NavbarComponent } from './navbar.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    imports: [ RouterModule,CommonModule,NgbModule ],declarations: [ NavbarComponent ],exports: [ NavbarComponent ],providers: [
        {
          provide: LocationStrategy,}
      ],})

export class NavbarModule {}

很高兴提供其他任何东西。老实说，甚至不确定什么是完全相关的……整个项目？？

GitHub link 到我的项目。

解决方法

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

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

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