angular - 如何通过单击按钮重定向到 Angular 4 中的新页面？

Question

在 home.component.html我希望按钮在单击时将 url 重定向到新页面。

我希望当我单击按钮时，当前网址 http://localhost:24282/home ，将被重定向到此网址 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

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

我不确定我是否正确使用了router.navigateByUrl或者有什么替代方法吗？

在 ASP.NET MVC 中，使用 razor 的 URL 帮助器类(例如 @Url.Action )可以很容易地做到这一点。

但是在 Angular 4 中(我对它还很陌生)，我不知道如何实现它。我进行了一些研究，但找不到与此相关的任何内容。

非常感谢任何帮助。

Answer 1

试试这个

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

或者

在你的 home.html

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

在你的 home 组件中

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

constructor(private router: Router){
}

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