我点击按钮时尝试重定向到另一个页面(Page-II),但遗憾的是另一个页面组件加载到同一页面(Page-I)。这是我到目前为止所尝试的:
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>
应用-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() {
}
}
注意:我知道该个人资料会在同一页面上加载,但当注册按钮点击另一个页面时,会尝试重定向register.html。
答案 0 :(得分:0)
你可以试试这个:
register() {
this.router.navigate(['/register']);
}
答案 1 :(得分:0)
或https://embed.plnkr.co/?show=preview
Angular Tour of Heroes示例带路由。