URL exchange but view keeps - routing with angular 4

Question

Good afternoon, everyone,

I am creating a page at the angle where it will have a button that will pass as an ID parameter and receive this ID on the other page. I’m using the Angular Router but I’m not getting it. I made the URL change, but the view still keeps from the previous page.

<td><button [routerLink]="['/editar', cliente.id]">Alterar</button></td>

On my button, I am using the code above to change the page.

my app.module looks like this:

const appRoutes: Routes = [
{ path: 'listar', component: ClienteListarPage },
{ path: 'inserir', component: ClienteInserirEditarPage },
{ path: 'editar/:id', component: ClienteInserirEditarPage }
]

@NgModule({
    declarations: [
        AppComponent,
        ClienteListarPage,
        ClienteInserirEditarPage
    ],
    imports: [
        RouterModule.forRoot(appRoutes),
        BrowserModule,
        HttpModule,
    ],
    providers: [
        ClienteService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

and the page that will open is like this:

 import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
    templateUrl: './inserir-editar.html'
})
export class ClienteInserirEditarPage implements OnInit {
    id: number;

    constructor(
        private route: ActivatedRoute,
        private router: Router) {}

    ngOnInit() {
        this.route.params.subscribe(params => {
            this.id = +params['id'];
            console.log('test');
        });
    }
}

The console.log that is inside the Clienteinserireditarpage class is not running. I tried using this navigation method as well:

this.router.navigate(['/editar', id]);

But it didn’t work either.

Answer 1

Check if the tag <router-outlet> is inserted in the app.html and has no name filter: <router-outlet name="list">

Answer 2

Good morning buddy, try to run like this

ngOnInit() {
        let teste = +this.route.snapshot.paramMap.get('id');
        console.log(teste );    
}