Angular 6中点击锚点传递ClickReportComponent的数组至DateClickReportComponent

Hey there! Given your component naming convention, I’m assuming we’re working with Angular here—let’s walk through a few solid approaches to get that searchFields array over to DateClickReportComponent when the anchor tag is clicked.

Approach 1: Pass Data via Router State #

This is great if the two components are routed separately (the most common scenario):

Step 1: Set up the click handler in ClickReportComponent #

First, inject the Router service, then bind a click event to your anchor tag (we’ll use a method instead of direct navigation to pass data):

// click-report.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-click-report',
  templateUrl: './click-report.component.html'
})
export class ClickReportComponent {
  searchFields = [/* your array data here */];

  constructor(private router: Router) {}

  navigateToDateReport(): void {
    // Pass the array via router state
    this.router.navigate(['/date-click-report'], {
      state: { searchFields: this.searchFields }
    });
  }
}

Update your anchor tag in the template to call this method:

<!-- click-report.component.html -->
<a (click)="navigateToDateReport()">View Date Click Report</a>

Step 2: Retrieve the data in DateClickReportComponent #

Use ActivatedRoute to access the navigation state, or directly pull from window.history.state:

// date-click-report.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-date-click-report',
  templateUrl: './date-click-report.component.html'
})
export class DateClickReportComponent implements OnInit {
  searchFields: any[];

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // Option 1: Use ActivatedRoute
    this.searchFields = this.route.navigationExtras.state?.searchFields;

    // Option 2: Directly access history state
    // this.searchFields = window.history.state.searchFields;
  }
}

Note: Router state data is lost on page refresh—if you need persistence, pair this with localStorage or a shared service.

Approach 2: Use a Shared Service (Best for Persistent Data) #

A shared service is ideal if you need the searchFields data to persist across routes or components, or if you want to avoid relying on router state.

Step 1: Create the shared service #

// report-data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ReportDataService {
  private searchFieldsSubject = new BehaviorSubject<any[]>([]);
  public searchFields$: Observable<any[]> = this.searchFieldsSubject.asObservable();

  updateSearchFields(fields: any[]): void {
    this.searchFieldsSubject.next(fields);
  }
}

Step 2: Update the service from ClickReportComponent #

// click-report.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { ReportDataService } from './report-data.service';

@Component({
  selector: 'app-click-report',
  templateUrl: './click-report.component.html'
})
export class ClickReportComponent {
  searchFields = [/* your array data here */];

  constructor(
    private router: Router,
    private reportDataService: ReportDataService
  ) {}

  navigateToDateReport(): void {
    // Update the service with the latest searchFields
    this.reportDataService.updateSearchFields(this.searchFields);
    // Navigate to the target component
    this.router.navigate(['/date-click-report']);
  }
}

Step 3: Subscribe to the service in DateClickReportComponent #

// date-click-report.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ReportDataService } from './report-data.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-date-click-report',
  templateUrl: './date-click-report.component.html'
})
export class DateClickReportComponent implements OnInit, OnDestroy {
  searchFields: any[];
  private subscription: Subscription;

  constructor(private reportDataService: ReportDataService) {}

  ngOnInit(): void {
    // Subscribe to the service to get the latest data
    this.subscription = this.reportDataService.searchFields$.subscribe(fields => {
      this.searchFields = fields;
      // Add your logic to use the array here
    });
  }

  ngOnDestroy(): void {
    // Clean up the subscription to avoid memory leaks
    this.subscription.unsubscribe();
  }
}

Approach 3: Input Binding (For Parent-Child Component Relationships) #

If DateClickReportComponent is a child component nested inside ClickReportComponent, you can use Angular's @Input() decorator:

Step 1: Add the Input to DateClickReportComponent #

// date-click-report.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-date-click-report',
  templateUrl: './date-click-report.component.html'
})
export class DateClickReportComponent {
  @Input() searchFields: any[];
}

Step 2: Toggle visibility and pass data from ClickReportComponent #

<!-- click-report.component.html -->
<a (click)="showDateReport = true">View Date Click Report</a>
<app-date-click-report 
  *ngIf="showDateReport" 
  [searchFields]="searchFields"
></app-date-click-report>

// click-report.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-click-report',
  templateUrl: './click-report.component.html'
})
export class ClickReportComponent {
  searchFields = [/* your array data here */];
  showDateReport = false;
}

内容的提问来源于stack exchange，提问作者Sandeep Nambiar