Wie navigiere ich (umleiten) auf eine andere Seite in Angular?

Question

Ich versuche, auf eine andere Seite umzuleiten (Page-II), wenn eine Schaltfläche geklickt hat, aber leider, dass eine andere Seitenkomponente auf derselben Seite geladen wird (Page-I). Hier ist, was ich versuchte, so weit:

app.component.html

<button (click)="register()" 
    mat-raised-button class="searchButton" type="button">Register</button> 
    <button (click)="profile()" 
    mat-raised-button class="searchButton" type="button">Profile</button> 
<router-outlet></router-outlet> 

app-routing.module.ts

const routes: Routes = [{ 
    path : 'register', 
    component : RegisterComponent 
}, 
{ 
    path : 'profile', 
    component : ProfileComponent 
}]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 

export class AppRoutingModule { } 

app.component.ts

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

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    title = 'app'; 
    constructor(private router: Router) {} 

    register = function() { 
     location.pathname = ('/register'); 
    }; 
    profile = function(){ 
     this.router.navigateByUrl('/profile'); 
    }; 
    ngOnInit() { 

    } 
} 

Hinweis: Ich weiß, dass das Profil auf derselben Seite geladen wird, aber versucht, Register.html umzuleiten, wenn die Registrierungsschaltfläche auf eine andere Seite klickt.

Answer 1

Können Sie dies versuchen:

register() { 
    this.router.navigate(['/register']); 
} 

Answer 2

Oder diese https://embed.plnkr.co/?show=preview

Angular-Tour of Heroes Beispiel mit Routing.