即使使用路由器插座也不会加载角度组件

Question

我在我的 app.component.html 中实现了一个导航栏和工具栏，我想将其重定向到我的其他页面，例如主页、员工等。我已经实现了 routerLink 以指向受尊重的链接：

<a routerLink="/Home" routerLinkActive="selected" class="list-item" (click)="drawer.toggle()">
            <i class="material-icons">home</i>Home</a>

这只是一个 mat-nav-list 项目的示例，我的导航栏可以完美运行，但无法正常工作的是重定向到页面和加载组件内容。

这是我的 app-component.scss 和我的 app.component.html。 我在 app.module.ts 和 app-routing.module.ts 中正常导入了所有设置

.sidenav-container {
    height: 100%;
    
  }
  
  .mat-drawer-content {
    display: flex;
  }
  
  .sidenav {
    width: 220px;
    background: rgb(4, 64, 96);    
  }
  
  .sidenav .mat-toolbar {
    background: rgb(4, 64, 96);
  }
  
  .mat-toolbar.mat-primary {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  
  .list-item {
    font-size: 23px;
    position: relative;
    font-family: "Rubik";
    color: rgba(255, 255, 255, 0.459);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  
  
  .list-item.selected {
    background: rgb(8, 8, 58);
    color: rgb(230, 225, 228);
  
  }
  
  .list-items {
    padding-top: 0px;
  }
  
  
  .material-icons {
    font-family: 'Material Icons';
    color: rgb(247, 247, 247);
    font-weight: normal;
    font-style: normal;
    font-size: 30px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  }
  
  .list-item i.material-icons{
    margin-right: 20px;
    font-size: 30px;
  }
  
  
  .list-item:hover {
    color: rgb(192, 138, 241);
  }
  
  
  .list-item::before{
    content: "";
    background-color: rgb(226, 207, 217);
    position: absolute;
    opacity: 0;
    height: 100%;
    width: 3px;
    top: 0;
    left: 0;
    transform: scaleY(0);
    transition: transform 0.3s, opacity 0.3s;
  }
  
  .list-item:hover::before {
    opacity: 0.5;
    transform: scaleY(0.5);
  }
  
  .list-item.selected::before{
    opacity: 1;
    transform: scaleY(1) scaleX(2);
  }
  
  .z-depth-1 {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  }
  
  .z-depth-1-half {
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
  }
  
  .z-depth-2 {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  }
  
  .z-depth-3 {
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
  }
  
  .z-depth-4 {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
  }
  
  .z-depth-5 {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
  }
  
  .center {
    padding-bottom: 50px;
    display: flex;
    max-width: 150px;
    max-height: 150px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
  
  .spacer {
    flex: 1 1 auto;
  }
  

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #drawer class="sidenav" fixedInViewport [attr.role]="true"
        [attr.role]="isHandset$ ? '˙dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
        [opened]="(isHandset$ | async) === false">
        <mat-toolbar>

        </mat-toolbar>
        <mat-nav-list class="list-items">
            <div class="spacer">
                <a routerLink="/Home">
                    <img class="center" src="assets/images/.svg" (click)="drawer.toggle()">
                </a>
            </div>
            <a routerLink="/Home" routerLinkActive="selected" class="list-item" (click)="drawer.toggle()">
                <i class="material-icons">home</i>Home</a>

            <a routerLink="/employee" routerLinkActive="selected" class="list-item" (click)="drawer.toggle()">
                <i class="material-icons">contacts</i>Employee</a>

            <a routerLink="/Project" routerLinkActive="selected" class="list-item" (click)="drawer.toggle()">
                <i class="material-icons">next_week</i>Project</a>

            <a routerLink="/Statistics" routerLinkActive="selected" class="list-item" (click)="drawer.toggle()">
                <i class="material-icons">show_chart</i>Statistics</a>

            <a routerLink="/Availability" routerLinkActive="selected" class="list-item" (click)="drawer.toggle()">
                <i class="material-icons">event_available</i>Availability</a>

            <a routerLink="/Reports" routerLinkActive="selected" class="list-item" (click)="drawer.toggle()">
                <i class="material-icons">outlined_flag</i>Reports</a>

            <a routerLink="/Registries" routerLinkActive="selected" class="list-item" (click)="drawer.toggle()">
                <i class="material-icons">library_add_check</i>Registries</a>
        </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
        <mat-toolbar color="accent">
            <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
                <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
            </button>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>
            <span class="spacer"></span>

            <span class="spacer"></span>
            <span class="material-icons spacer">account_circle</span>
        </mat-toolbar>

        <ng-content>
        </ng-content>
    </mat-sidenav-content>
</mat-sidenav-container>

我的 Home 组件只准备了一个测试段落。

<div class="center">
    <p>home works!</p>
</div>
<router-outlet></router-outlet>

一旦点击进入页面，它不会显示测试段落，即使实现了 css 也不会显示。 gif to show the problem.

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

import { MatMenuModule } from "@angular/material/menu";
import { MatCardModule } from "@angular/material/card"
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PageComponent } from './page/page.component';
import { ProjectComponent } from './project/project.component';
import { StatisticsComponent } from './statistics/statistics.component';
import { AvailabilityComponent } from './availability/availability.component';
import { ReportsComponent } from './reports/reports.component';
import { RegistriesComponent } from './registries/registries.component';
import { EmployeeComponent } from './employee/employee.component';
import { HomeComponent } from './home/home.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from "@angular/material/button";
import { NavbarComponent } from './navbar/navbar.component';
import { MatToolbarModule } from "@angular/material/toolbar";
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatIconModule } from '@angular/material/icon';
import { MatSidenavModule } from "@angular/material/sidenav";
import { LayoutModule } from '@angular/cdk/layout';
import { MatListModule } from '@angular/material/list'
import { ReactiveFormsModule } from "@angular/forms";
import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";


@NgModule({
  declarations: [
    AppComponent,
    PageComponent,
    ProjectComponent,
    StatisticsComponent,
    AvailabilityComponent,
    ReportsComponent,
    RegistriesComponent,
    EmployeeComponent,
    HomeComponent,
    NavbarComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatToolbarModule,
    MatButtonToggleModule,
    MatIconModule,
    MatMenuModule,
    MatCardModule,
    MatSidenavModule,
    LayoutModule,
    MatListModule,
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

我就是不知道问题出在哪里。

如果有人可以帮助我，这是我的代码 sn-ps。

Answer 1

通过实施更好的应用组件和修复路由来修复它。