如何在Angular中导航(重定向)到另一个页面?

时间:2017-11-27 09:36:56

标签: html angular typescript

我点击按钮时尝试重定向到另一个页面(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。

2 个答案:

答案 0 :(得分:0)

你可以试试这个:

register() {
    this.router.navigate(['/register']);
}

答案 1 :(得分:0)

https://embed.plnkr.co/?show=preview

Angular Tour of Heroes示例带路由。