Angular代码实现带参数导航至接收Input的组件方法

Got it, let's break this down for you. The key issue here is: when you navigate to HostPersonalAreaComponent via Angular Router, it's loaded as a routed component—not as a child component nested directly in another template. That’s why your @Input() decorator isn’t picking up the data—@Input() only works for parent-child relationships where the child is declared in the parent’s template.

Here are two reliable methods to pass parameters when routing:

Method 1: Use Route Parameters (Path or Query Params) #

This is ideal for passing simple values like IDs, strings, or numbers that you want visible in the URL.

Step 1: Update your Route Configuration #

First, add a parameter to your route definition (in app-routing.module.ts or your feature routing module):

const routes: Routes = [
  // ... other routes
  { path: 'host-personal-area/:suggestionId', component: HostPersonalAreaComponent }
];

Or if you prefer query params (visible as ?suggestionId=123 in the URL):

const routes: Routes = [
  // ... other routes
  { path: 'host-personal-area', component: HostPersonalAreaComponent }
];

Step 2: Navigate with the Parameter #

For path params:

// Assuming you have a suggestion object with an `id` property
this.router.navigate(['/host-personal-area', this.suggestion.id]);

For query params:

this.router.navigate(['/host-personal-area'], {
  queryParams: { suggestionId: this.suggestion.id }
});

Step 3: Fetch the Parameter in HostPersonalAreaComponent #

Inject ActivatedRoute into your component and subscribe to the params:

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

export class HostPersonalAreaComponent implements OnInit, OnDestroy {
  suggestion: Suggestion;
  private routeSub: Subscription;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // For path params
    this.routeSub = this.route.params.subscribe(params => {
      const suggestionId = params['suggestionId'];
      // Now fetch your suggestion data using the ID (e.g., from a service)
      // this.suggestionService.getSuggestion(suggestionId).subscribe(data => {
      //   this.suggestion = data;
      // });
    });

    // For query params (uncomment this if using query params instead)
    // this.routeSub = this.route.queryParams.subscribe(params => {
    //   const suggestionId = params['suggestionId'];
    //   // Fetch suggestion data here
    // });
  }

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

Method 2: Use Router State to Pass Complex Objects #

If you want to pass a full Suggestion object without exposing it in the URL, use Angular Router’s state feature (available in Angular 7+).

Step 1: Navigate with State #

this.router.navigate(['/host-personal-area'], {
  state: { suggestion: this.suggestion }
});

Step 2: Retrieve the State in HostPersonalAreaComponent #

You need to fetch the state immediately in ngOnInit (before the navigation finishes):

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

export class HostPersonalAreaComponent implements OnInit {
  suggestion: Suggestion;

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

  ngOnInit() {
    // Get state from current navigation
    const navigation = this.router.getCurrentNavigation();
    this.suggestion = navigation?.extras.state?.['suggestion'];

    // Fallback in case the component is reloaded (state is stored in browser history)
    if (!this.suggestion) {
      this.suggestion = history.state?.suggestion;
    }

    console.log(this.suggestion);
  }
}

⚠️ Note: State data is tied to the browser’s history, so if the user refreshes the page, the state will be lost unless you add a fallback (like fetching the data via an ID from a service).

Quick Note on @Input() #

If you ever use HostPersonalAreaComponent as a nested child component (not routed), you’d pass the input like this in the parent template:

<app-host-personal-area [suggestion]="mySuggestion"></app-host-personal-area>

But since you’re using routing, stick to the methods above.

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