如何在文件间传递JavaScript类变量及解决TS-HTML数据绑定问题

Let's tackle your issues step by step—first fixing the immediate template binding problem, then covering how to share class variables across multiple files.

First: Fix Your AttributesPage Class & Template Binding #

Your current TypeScript code has invalid constructor syntax, which is why your chart property isn't working as expected. Here's the corrected version:

Corrected attributes.ts #

export class AttributesPage {
  // Explicitly type the property for better TypeScript safety (optional but recommended)
  chart: number[];

  constructor() {
    // Initialize the array inside the constructor body (not in the parameter list)
    const chartArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    // Assign to the class instance property
    this.chart = chartArray;
  }
}

Fixing the HTML Template #

In Ionic/Angular templates, you don't need to use this—template expressions directly reference class properties. To display the array as a comma-separated string:

<ion-content>
  <ion-card-header>
    <!-- Will render: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 -->
    {{ chart.join(', ') }}
  </ion-card-header>
</ion-content>

If you want to loop through each item instead, use Angular's *ngFor directive:

<ion-content>
  <ion-card-header>Chart Values:</ion-card-header>
  <ion-list>
    <ion-item *ngFor="let number of chart">
      {{ number }}
    </ion-item>
  </ion-list>
</ion-content>

Second: Sharing Class Variables Across Multiple Files #

There are several standard patterns for sharing data between TypeScript files, depending on your app's structure and needs:

1. Singleton Service (Most Common for Shared State) #

Create an Angular/Ionic service marked as a singleton—this lets any component inject it and access shared data.

Step 1: Create the Service

// shared-data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Ensures only one instance of the service exists
})
export class SharedDataService {
  // Private backing field to prevent direct external mutation
  private _chartData: number[] = [];

  // Getter to return a copy of the data (prevents unintended changes)
  get chartData(): number[] {
    return [...this._chartData];
  }

  // Setter to update the shared data
  set chartData(data: number[]) {
    this._chartData = [...data]; // Store a copy for immutability
  }
}

Step 2: Use the Service in Components

In your AttributesPage:

import { SharedDataService } from './shared-data.service';

export class AttributesPage {
  chart: number[];

  constructor(private sharedDataService: SharedDataService) {
    this.chart = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    // Save the chart data to the shared service
    this.sharedDataService.chartData = this.chart;
  }
}

In another component that needs access:

// other-component.ts
import { SharedDataService } from './shared-data.service';

export class OtherComponent {
  sharedChart: number[];

  constructor(private sharedDataService: SharedDataService) {
    // Retrieve the shared chart data
    this.sharedChart = this.sharedDataService.chartData;
  }
}

2. Component Input/Output (Parent-Child Data Flow) #

If you're passing data between a parent and child component, use Angular's @Input() and @Output() decorators:

• Parent → Child: Use @Input() to pass data down
• Child → Parent: Use @Output() with an EventEmitter to send data up

Example (Child Component)

// child-component.ts
import { Input } from '@angular/core';

export class ChildComponent {
  // Accept data from the parent component
  @Input() chartData: number[];
}

Parent Template

<!-- parent.component.html -->
<app-child [chartData]="chart"></app-child>

3. Route Parameters (For Page Navigation) #

If you need to pass data when navigating between pages, use route query parameters (best for small, serializable data):

Send Data from AttributesPage

import { Router } from '@angular/router';

export class AttributesPage {
  chart: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  constructor(private router: Router) {}

  navigateToOtherPage() {
    // Convert array to JSON string (route params are string-only)
    const chartJson = JSON.stringify(this.chart);
    this.router.navigate(['/other-page'], { queryParams: { chart: chartJson } });
  }
}

Receive Data in Target Page

import { ActivatedRoute } from '@angular/router';

export class OtherPage {
  chart: number[];

  constructor(private route: ActivatedRoute) {
    const chartJson = this.route.snapshot.queryParams['chart'];
    // Parse JSON back to array
    this.chart = JSON.parse(chartJson);
  }
}

4. Centralized State Management (For Large Apps) #

For complex apps with extensive shared state, use libraries like NgRx or Akita. These tools provide a single source of truth for app state and make data sharing predictable at scale—though they're overkill for small projects.

内容的提问来源于stack exchange，提问作者William Merritt