Angular 4 - 如何通过点击特定帖子在下一个网址中检索ID？

Question

我想在特定的帖子（product.component）上进行clik并在下一个url（details.component）上检索它的id。提前谢谢！

product.component.html

 <div class="card">
    <h5>{{titre}}</h5>
    <p class="card-text">{{description}}</p>
    <p><a [routerLink]="['details',id]">Click here!</a></p>
  </div>

product.component.ts

import {Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  @Input() titre:string;
  @Input() description:string;
  @Input() id:string;

  ngOnInit() {
  }

}

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  title = 'home works!';

  products = [{
    titre:"titre1",
    desc:"desc1",
    id:"0"
  },{
    titre:"titre2",
    desc:"desc2",
    id:"1"
  },{
    titre:"titre3",
    desc:"desc3",
    id:"2"
  }];

}

details.component.ts

import { Component, OnInit, Input } from '@angular/core';
import {ActivatedRoute} from "@angular/router";

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

    id:any;

  constructor(route: ActivatedRoute) {
    this.id = route.snapshot.params['id'];
  }

  ngOnInit() {

  }

  onSubmit = function (user) {
    console.log(user);
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { ProductComponent } from './product/product.component';
import { DetailsComponent } from './details/details.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    ProductComponent,
    DetailsComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      {
        path: '',
        pathMatch: 'full',
        component: HomeComponent
      },
      {
        path: 'product',
        component: ProductComponent
      },
      {
        path: 'details/:id',
        component: DetailsComponent
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

home.component.html

<div class="home">
  <div class="album text-muted">
  <div class="container">
    <div class="row">
      <product
        class="col-md-4"
        *ngFor="let p of products"
        [description]="p.desc"
        [id]="p.id"
        [titre]="p.titre">
      </product>
    </div>
  </div>
</div> 

Answer 1

在您的路线中，请确保您将id定义为参数。

{
  path: 'details/:id',
  component: DetailsComponent
}

然后将您的DetailsComponent更新为此...

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.css']
})
export class DetailsComponent implements OnInit, OnDestroy {
  public id: any;
  private idSubscription: Subscription;

  constructor(public route: ActivatedRoute) {}

  ngOnInit() {
    this.idSubscription = this.route.params.subscribe((params: any) => {
      console.log(params.id)
      this.id = params.id;
    });
  }

  ngOnDestroy() {
    this.idSubscription.unsubscribe();
  }

  onSubmit = function (user) {
    console.log(user);
  }
}