ASP.NET Core + Angular 路由不起作用

Question

我正在尝试实现我的SPA应用程序的路由，但它根本不起作用，我不知道我在这里做错了什么，我看了很多教程，但我找不到问题。我错过了什么吗？

首先，我设置了两个组件的路由：登录和注册。

app.routes.ts

import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';

export const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent }

];

然后我在 my app.component.ts

中导入路由组件

import { Component } from '@angular/core';
import { CoursesComponent } from './courses.component';
import { AuthorComponent } from './author/author.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [CoursesComponent, AuthorComponent, NavbarComponent, FooterComponent, RouterOutlet],
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent {
  title = 'angular app';
}

app.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>
<app-footer></app-footer>

我在我的 navbar.component.html

上实现了带有 routerLink 属性的按钮

<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <div class="m-1" >
        <a class="btn btn-primary m-1" routerLink="./login">Login</a>
        <a class="btn btn-primary m-1" routerLink="./register">Register</a>
      </div>      
    </div>
  </div>
</nav>

登录.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrl: './login.component.css'
})
export class LoginComponent {

}

我点击了导航栏组件上的按钮，重定向没有发生，实际上什么也没发生。

Answer 1

要使路由器工作，您应该按如下方式导入 RouterLink 指令：

navbar.component.html

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterLink]
})
class NavComponent{}