URL exchange but view maintains - routing with angular 4

Good afternoon guys,

I'm creating a page in the angle where it will have a button that will pass as one parameter ID and receive this ID on the other page. I'm using the Angle Router but I can not. I made the URL change, but the view still retains the previous page.

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

On my button, I'm using the above code to swap 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 you are going to open looks 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 clientInserirEditarPage class is not running. I tried using this navigation method too:

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

But it also did not work.