ボタンをクリックしてAngular 4で新しいページにリダイレクトする方法は？

Question

home.component.htmlページクリックすると、URLを新しいページにリダイレクトします。

ボタンをクリックすると、現在のURL http://localhost:24282/homeがこのURLにリダイレクトされることが期待されますhttp://localhost:24282/masterとmaster.component.htmlページが表示されます。

問題は、ボタンをクリックしたときにURLがhttp://localhost:24282/masterにリダイレクトされますが、まだ私は現在のページhome.component.htmlです。私は完全にマスターページにリダイレクトされていませんmaster.component.html

以下は実装です。

app.routing.ts

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './Components/home.component'; 
import { MasterComponent } from './Components/master/master.component'; 
import { PageNotFoundComponent } from "./Components/common/page-not-found.component"; 

const appRoutes: Routes = [ 
    { path: 'home', component: HomeComponent }, 
    { path: 'master', component: MasterComponent }, 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { path: '**', component: PageNotFoundComponent } 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

app.module.ts

import { NgModule } from '@angular/core'; 
import { APP_BASE_HREF } from '@angular/common'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { routing } from './app.routing'; 
import { HomeComponent } from './Components/home.component'; 
import { MasterComponent } from './Components/master/master.component'; 
import { PageNotFoundComponent } from "./Components/common/page-not-found.component"; 

@NgModule({ 
    imports: [BrowserModule, routing], 
    declarations: [AppComponent, HomeComponent, MasterComponent, PageNotFoundComponent], 
    providers: [{ provide: APP_BASE_HREF, useValue: '/' }], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

app.component.ts - newChange（）メソッドは

定義されます

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

@Component({ 
    selector: 'moc-landing', 
    templateUrl: './app/Components/home.component.html', 
    styleUrls: ['./app/Components/home.component.css'] 
}) 
export class AppComponent { 
constructor(private router: Router) {} 

    newChange(): void { 
     this.router.navigateByUrl('master'); 
    } 
} 

home.component.html私は私が正しくrouter.navigateByUrlを使用しているか、何らかの別の方法があるかどうかはわからない

<button id="new" class="btn btn-primary" (click)="newChange()">New Change Request</button>

？

ASP.NET MVCでは、これは、かみそりのURLヘルパークラス（例：@Url.Action）を使用して簡単に行うことができます。

しかし、Angular 4（これはかなり新しくなっています）では、実装方法はわかりません。私はいくつかの研究を行ったが、これに関連するものは何も見つかりませんでした。

ご協力いただきまして誠にありがとうございます。

Answer 1

navigateByUrlは常に絶対URLが必要です。

i.e. router.navigateByUrl("/team/33/user/11"); 

あなたは相対的なルートを提供したい場合は、あなたの代わりにnavigateを使用することができます。

router.navigate(['team', 33, 'user', 11], {relativeTo: route}); 

Answer 2

は

あなたhome.htmlでこの

<button (click)="router.navigate(['/master']);"> 
    <span>Go to master Page</span> 
</button> 

OR

をお試しください

<button (click)="goToPage('master')"> 
    <span>Go to master Page</span> 
</button> 

と自宅のコンポーネントで

import { Router } from '@angular/router'; 

constructor(private router: Router){ 
} 

function goToPage(pageName:string){ 
    this.router.navigate([`${pageName}`]); 
}