Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Roteamento não funcionando em rotas "Children"

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

Adicionar

Nome da Categoria

DataNome do ItemPreç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!
1 resposta
solução!

Oi Marina, tudo bem?

Que bom que encontrou a solução. Irei fechar o tópico por você.

Um abraço e bons estudos.