在home.component.html
页面中,我希望按钮在单击时将URL重定向到新页面。
我希望当我点击按钮时,当前网址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中(我对它很新),我不知道如何实现它。我已经完成了一些研究,但找不到任何相关的研究。
任何帮助是极大的赞赏。
试试这个
<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>
并在您的家庭组件
import { Router } from '@angular/router';
constructor(private router: Router){
}
function goToPage(pageName:string){
this.router.navigate([`${pageName}`]);
}
navigateByUrl
总是期望一个绝对的URL。
i.e. router.navigateByUrl("/team/33/user/11");
如果要提供相对路线,可以使用navigate
代替:
router.navigate(['team', 33, 'user', 11], {relativeTo: route});
我同意Veena K. Suresh的解决方案,通过点击事件导航,但你也可以通过相同的技巧传递数据
router
模块,如:import { Router } from '@angular/router';
constructor(
private router: Router
) { }
<a (click)="router.navigate(['/search',search.value]);" class="search-area__icon">
<i class="la la-search"></i>
</a>