App Routes e Po-Menu- Item

Framework - Linha Protheus Ferramentas
, , ,
1

Pessoal, boa tarde.

Poderiam me dar um apoio 'básico'.

Estou iniciando no Angular 17 e por conta das variações de versões, muitas documentações do proprio PO-UI não informam como está o processo de Router na nova versão do angular, com o app.routes, por exemplo.

Teriam um exemplo prático de redirecionamento de Pagina com o Menu Item usando o POMENUITEM na versão 17/18? Sem o app.routing.module.

E caso tenham algum outro exemplo para me aprofundar nos estudos, eu agradeceria.

Att

2

Fala Rafael, tudo bem? Segue exemplo espero que ajude.


//app.component.html
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { Component } from '@angular/core';
import { Router, RouterOutlet } from '@angular/router';

import {
  PoComponentsModule,
  PoMenuItem,
  PoMenuModule,
  PoModule,
  PoPageModule,
  PoToolbarModule,
} from '@po-ui/ng-components';
import { PoTemplatesModule } from '@po-ui/ng-templates';
import { ProspectListComponent } from './feature/prospect-list/prospect-list.component';

@Component({
  selector: 'app-root',
  standalone: true,

  imports: [
    CommonModule,
    RouterOutlet,
    PoToolbarModule,
    PoMenuModule,
    PoPageModule,
    HttpClientModule,
    PoModule,
    PoTemplatesModule,
    PoComponentsModule,
    ProspectListComponent,
  ],

  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private router: Router) {}
  readonly menus: Array<PoMenuItem> = [
    {
      label: 'Home',
      action: this.onClick.bind(this),
      icon: 'po-icon po-icon-money',
      shortLabel: 'Home',
    },
    {
      label: 'Prospect',
      action: () => this.router.navigate(['/prospect']),
      icon: 'po-icon po-icon-money',
      shortLabel: 'Prospect',
    },
  ];

  private onClick() {
    alert('Clicked in menu item');
  }
}



//app.routes.ts

import { Routes } from '@angular/router';
import { ProspectListComponent } from './feature/prospect-list/prospect-list.component';

export const routes: Routes = [
  { path: 'prospect', component: ProspectListComponent },
];



//app.component.ts
export class AppComponent {
  constructor(private router: Router) {}
  readonly menus: Array<PoMenuItem> = [
    {
      label: 'Home',
      action: this.onClick.bind(this),
      icon: 'po-icon po-icon-money',
      shortLabel: 'Home',
    },
    {
      label: 'Prospect',
      action: () => this.router.navigate(['/prospect']),
      icon: 'po-icon po-icon-money',
      shortLabel: 'Prospect',
    },
  ];

  private onClick() {
    alert('Clicked in menu item');
  }
}
3

Leandro, muito obrigado !

Já é um começo.

4

que bom, marca ai como resposta