单击按钮后，角度重定向到空白页

如何解决单击按钮后，角度重定向到空白页

我有一个带有一个按钮的主页，当用户单击该按钮时，必须将用户重定向到另一页面。 我试图使它像这样，但是当我单击按钮时什么也没发生：

app.component.ts

import { Component } from '@angular/core';
import {Router} from '@angular/router'
@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'SaveWorld';
  constructor(private router:Router){}

 onClick(){
this.router.navigateByUrl('/saveWorld');
   }
}

按钮代码：

<button  click)="onClick()"type="button" class="button" >Make a change</button>

路线

import {NgModule} from  '@angular/core';
import {Routes,RouterModule} from  '@angular/router';
import {HomePageComponent} from  '../app/home-page/home-page.component'

const routes:Routes=[

     {path:'HomePage',component:HomePageComponent},{path:'saveWorld',component:SaveWorldComponent},{path:'',redirectTo:'/HomePage',pathMatch:'full'}
];

@NgModule({
    imports:[RouterModule.forChild(routes)],exports:[RouterModule]
})
export class AppRoutingModule {}

你能帮我吗？

更新：

现在，当我单击该按钮时可以使用，但不能使用我想要的方式，请不要将我重定向到新的空白页面。 https://i.stack.imgur.com/QYSMw.jpg

解决方法

您的路径/定位中有typo。将其更改为HomePage或homePage，但不要混合使用。

,

您必须在app.component.html中添加<router-outlet></router-outlet>。 看看这个https://angular.io/guide/router，它可能会对您有所帮助。