ActivatedRoute Params Angular 6

Question

我正在尝试通过ActivatedRouted获取每个记录的数据，我设法获取每个记录的ID，但无法获取其他数据。有什么想法吗？

我的闪电战： https://stackblitz.com/edit/angular-activatedroute-params

services.ts

getProductos() {

this.productos = [
  {
    id: 'lomoFino',
    titulo: 'Lomo fino',
    descripcion: 'Es la pieza más fina de la res, de textura tierna.',
    recomendaciones: ['Guisos', 'Freir', 'Plancha'],
    ubicacion: 'Lomo',
  },
  {
    id: 'colitaCuadril',
    titulo: 'Colita de cuadril',
    descripcion: 'Es un corte triangular y ligeramente marmoleado.',
    recomendaciones: ['Guisos', 'Freir', 'Horno'],
    ubicacion: 'Trasera',
  },
  {
    id: 'asadoCuadrado',
    titulo: 'Asado cuadrado',
    descripcion: 'Corte fibroso, de sabor agradable.',
    recomendaciones: ['Guisos', 'Freir', 'Plancha'],
    ubicacion: 'Entrepierna',
  }
]

return this.productos
}

productos.component.ts

ngOnInit() {
  this.productos = this.ps.getProductos();
}

productos.component.html

<div *ngFor="let producto of productos">
  <a [routerLink]="['/productos', producto.id]">{{ producto.titulo }}</a>
</div>

producto-detalle.component.ts

constructor( private activatedRoute: ActivatedRoute ) { }

ngOnInit() {
  this.id = this.activatedRoute.snapshot.paramMap.get('id')
  this.titulo = this.activatedRoute.snapshot.paramMap.get('titulo')
  this.descripcion = this.activatedRoute.snapshot.paramMap.get('descripcion')
}

producto-detalle.component.html

ID: {{ id }}<br>
Título: {{ titulo }}<br>
Descripción: {{ descripcion }}<br>

例如，如何获取titulo和descripcion。

Answer 1

您可以使用ActivatedRoute的解析器（请参阅Resolve: pre-fetching component data）。这样，您的producto数据将被预提取到ActivatedRoute的 data对象，并且在activatedRoute.snapshot.data下可用。现在，您可以在组件中使用它了：

ngOnInit() {
  const producto = this.activatedRoute.snapshot.data.producto;

  this.id = producto.id;
  this.titulo = producto.titulo;
  this.descripcion = producto.descripcion;
}

您的路由器配置应使用解析器更新：

const routes: Routes = [
  { path: '', component: ProductosComponent },
  { 
    path: 'productos/:id', 
    component: ProductoDetalleComponent,
    resolve: {
      producto: ProductoResolver
    }
  },
];

STACKBLITZ

Crisis center code

Answer 2

您必须将所有数据添加到params列表中。首先使用以下代码更新app.router.ts：

{ path: 'productos/:id/:titulo/:description', component: ProductoDetalleComponent }

更新productos.component上的代码：

<a [routerLink]="['/productos', producto.id,producto.titulo,producto.descripcion]">

这里是working stackblitz

Answer 3

您可以在service.ts中创建一个新方法，例如

getproduct(id:int) {
//code to return product based 
on id.
}

，它将接受一个I​​D，并根据ID返回产品。 如何编写用于过滤对象的代码？见下面的链接。 https://expertcodeblog.wordpress.com/2018/02/26/typescript-filter-object-array-with-multiple-conditions/

现在这是你的流程。 1.从激活的路径中拔出ID。 2.在ngOninit的producto-detalle.component.ts中，从service.ts调用getproduct（id）方法。 （记住要注入服务） 3.为从getproduct（id）收到的产品分配id，titulo，descripcion，并将其显示在html上。