Question

在home.component.html页面中，我希望按钮在点击时将网址重定向到新页面。

我希望当我点击该按钮时，当前网址http://localhost:24282/home会被重定向到此网址http://localhost:24282/master，并会显示master.component.html页面。

问题在于，虽然当我点击按钮时，网址会被重定向到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>

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}`]);
}

Answer 2

navigateByUrl总是需要绝对网址。

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

如果您想提供相对路线，可以改为使用navigate：

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

Answer 3

如果您使用链接（<a>），则只需要routerLink directive/parameter：

<a class="btn" routerLink="/votes">Check votes</a>

如果您正在使用按钮（<button>），则需要一个(click)事件：

<button class="btn" (click)="goToVotes()">Check votes</button>

在这种情况下，最好创建一个函数/方法，因为在组件的构造函数中保留私有参数是一种好的做法，即不要直接在其构造函数上使用router.navigate()您的HTML（由于使用了组件的私有成员，因此避免了“路由器”警告）。

import { Component } from '@angular/core';
import { Router } from '@angular/router';
// component details here...
export class MyComponent  {
  constructor(private router: Router){ }

  goToVotes($myParam: string = ''): void {
    const navigationDetails: string[] = ['/votes'];
    if($myParam.length) {
      navigationDetails.push($myParam);
    }
    this.router.navigate(navigationDetails);
  }
}

上面的 goToVotes 方法还将在 navigate 的数组中添加第二个值（如果其参数不为空），因此：

<button class="btn" (click)="goToVotes('ca')">Go vote</button>

将重定向到/votes/ca。

Answer 4

我同意Veena K. Suresh提出的通过click事件进行导航的解决方案，但您也可以通过相同的技巧传递数据

将router模块导入到您当前的组件中，例如：

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

将其注入您的构造函数

constructor(
    private router: Router
  ) { }

刚刚添加到锚点ta，您想在其上使用

<a (click)="router.navigate(['/search',search.value]);" class="search-area__icon"> 
    <i class="la la-search"></i>
</a>

Answer 5

最近的答复，但仍然发布答案，希望我的答案对其他人有用。

按如下所示修改app.component.html文件中的代码。

<div>
    <router-outlet></router-outlet>
</div>

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

5 个答案: