Olá,
estou precisando navegar de um elemento para outro e ambos são children de uma outra rota. Nos componentes independentes, que não estão dentro de nenhum outro, eu consigo usar o routerLink e a função navigate do Router normalmente, mas no caso desses elementos children, o navigate não funciona e eu recebo o seguinte erro tentando usar o routerLink:
Can't bind to 'routerLink' since it isn't a known property of 'a'. Nas aulas o instrutor usa a diretiva normalmente dentro de um elemento children.
Segue o código das rotas do módulo: manage-items-routing.module.ts
import { AddUpdateItemComponent } from './add-update-item/add-update-item.component'; import { ManageItemsComponent } from './manage-items.component'; import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { ManageItemComponent } from './manage-item/manage-item.component';
const routes: Routes = [{ path: '', component: ManageItemsComponent, children:[ { path: 'manage-item', component: ManageItemComponent }, { path: 'add-update-item', component: AddUpdateItemComponent }, ], }];
@NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class ManageItemsRoutingModule { }
Template: manage-item.component.html
AdicionarNome da Categoria
Data | Nome do Item | Preço |
---|---|---|
{{ item?.date | date:"short" }} | {{ item?.itemName }} | {{ item?.itemPrice | currency }} |
Nenhuma operação cadastrada
Componente: manage-item.component.ts
import { InventoryItem } from '../../models/inventory-item.model'; import { Component, OnInit } from '@angular/core'; import { AddUpdateItemService } from '../add-update-item/add-update-item.service'; import { Router } from '@angular/router';
@Component({ selector: 'app-manage-item', templateUrl: './manage-item.component.html', styleUrls: ['./manage-item.component.scss'] }) export class ManageItemComponent implements OnInit{
inventoryItems: any[];
constructor(private addUpdateItemService: AddUpdateItemService, private router: Router) {}
ngOnInit(){ this.addUpdateItemService.allItems().subscribe((inventoryItems: InventoryItem[]) => { console.table(inventoryItems); this.inventoryItems = inventoryItems; }) }
}
Obrigada
- Resposta já encontrada!