当我导航到注册网站时，注册组件不显示

Question

我是角度新手。所以我已经设置了路由，当我的网站导航到 /signup 时，它应该获得注册组件。这里可能有什么问题？

signup.component.ts

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

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrl: './signup.component.scss',
})
export class SignupComponent {}

signup.component.html

<div class="signup-container">
  <mat-card class="signup-card">
    <mat-card-content>
      <h2 class="signup-caption">Sign Up</h2>
      <form>
        <div class="form-input">
          <mat-form-field>
            <mat-label>Email</mat-label>
            <input
              matInput
              placeholder="Enter your email"
              name="email"
              type="email"
              required
            />
          </mat-form-field>
        </div>

        <div class="form-input">
          <mat-form-field>
            <mat-label>Name</mat-label>
            <input
              matInput
              placeholder="Enter your Name"
              name="name"
              type="name"
              required
            />
          </mat-form-field>
        </div>

        <div class="form-input">
          <mat-form-field>
            <mat-label>Password</mat-label>
            <input
              matInput
              placeholder="Enter your Password"
              name="password"
              type="password"
              required
            />
          </mat-form-field>
        </div>

        <div class="form-input">
          <mat-form-field>
            <mat-label>Confirm password</mat-label>
            <input
              matInput
              placeholder="Confirm your password"
              name="confirmPassword"
              type="password"
              required
            />
          </mat-form-field>
        </div>
        <button mat-raised-button color="bg-dark" class="signup-button">
          Sign Up
        </button>
      </form>
    </mat-card-content>
  </mat-card>
</div>

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SignupComponent } from './components/signup/signup.component';
import { LoginComponent } from './components/login/login.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'signup', component: SignupComponent },
];

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

app.component.html

<div>
  <mat-toolbar color="bg-light" class="navbar">
    <span class="navbar-brand">Stack Exchange</span>
    <span class="spacer"></span>
    <button routerLink="/login" routerLinkActive="active">Login</button>
    <button routerLink="/signup" routerLinkActive="active">sign up</button>
  </mat-toolbar>
</div>

app.module.ts

import { NgModule } from '@angular/core';
import {
  BrowserModule,
  provideClientHydration,
} from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { LoginComponent } from './components/login/login.component';
import { SignupComponent } from './components/signup/signup.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent, LoginComponent, SignupComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatSlideToggleModule,
    MatToolbarModule,
    MatCardModule,
    MatInputModule,
    HttpClientModule,
  ],
  providers: [provideClientHydration(), provideAnimationsAsync()],
  bootstrap: [AppComponent],
})
export class AppModule {}

我认为这可能是一些导入问题，所以你可能会发现一些不必要的导入。这可能是关于路由或一些我没有的标签的问题。

Answer 1

您的

app.component.html

似乎缺少用于渲染路线的

router-outlet

！

<div>
  <mat-toolbar color="bg-light" class="navbar">
    <span class="navbar-brand">Stack Exchange</span>
    <span class="spacer"></span>
    <button routerLink="/login" routerLinkActive="active">Login</button>
    <button routerLink="/signup" routerLinkActive="active">sign up</button>
  </mat-toolbar>
</div>
<router-outlet></router-outlet>