为什么 onclick 函数在 html -angular 中不起作用

Question

user.html:

<div class="bg-image" 
  style="background-image: url('./assets/Images/Homepage.jpg');
         height:100vh; position:fixed; min-width:100%; min-height:100%; background-repeat:no-repeat; background-size:cover">
         <mat-toolbar style="background-color:purple;" >
            <mat-toolbar-row>
             <span style="color:white; font-size:medium;padding:20px;margin-top:15px;">HOME</span>
             <span style="color:white; font-size:medium;padding:20px;margin-top:15px;cursor: pointer;" (click)="About()">ABOUT</span>
             <span style="color:white; font-size:medium;padding:20px;margin-top:15px;">CLASSES</span>
             <span style="color:white; font-size:medium;padding:20px;margin-top:15px;">CONTACT US</span>
            </mat-toolbar-row>
         </mat-toolbar>
</div>

user.ts:

import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  constructor(private router:Router) { 

  }

  ngOnInit(): void {
  }

  About()
  {
    this.router.navigate(['/about-page']);
  }

}

单击关于它不会导航到关于页面。在我的关于页面组件中，我给出了 1 行 html，因为它可以正常工作。

Answer 1

尝试导入RouterModule

//app.module.ts
import {RouterModule} from '@angular/router';

@NgModule({
imports: [RouterModule]
});