代码之家 › 专栏 › 技术社区 › Paco Zevallos

激活路由参数角度6

typescript angular

1

Paco Zevallos · 技术社区 · 7 年前

我正在尝试通过activatedrouted获取每条记录的数据,我已经设法获取了每条记录的id,但无法获取其他数据。有什么想法吗?

我的stackblitz: https://stackblitz.com/edit/angular-activatedroute-params

服务.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 例如。

3 回复 | 直到 7 年前

1

4

Andriy 7 年前

你可以使用 ActivatedRoute 的解析器(请参见 Resolve: pre-fetching component data )中。这样,您的producto数据将被预取到 激活路由 的 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

2

0

Andriy 7 年前

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

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

更新productos.component上的代码:

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

这是一个 working stackblitz

3

0

zahid 7 年前

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

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

它将接受一个id并根据id返回产品。如何编写过滤对象的代码?请参阅下面的链接。 https://expertcodeblog.wordpress.com/2018/02/26/typescript-filter-object-array-with-multiple-conditions/

现在这是你的流程… 一。从激活的路线中拉出ID。 2.在来自ngoniit的producto-detalle.component.ts中,从service.ts调用getProduct(id)方法(记住注入服务) 3.从getProduct(id)接收的产品中分配id,titulo,description,并在html上显示。