再次单击导航按钮后，Angular 13组件不显示

Question

场景：

我有一个导航组件，该组件可导航到两个组件中的任何一个，具体取决于单击的链接。对于写入组件，我最初显示带有卡片的网格列表。单击卡时，通过TringUpComponent的路由器插座显示的显示组件交换了网格列表。到目前为止，一切都很好，但是...

我期望发生的事情：

用户再次单击导航按钮，并再次显示卡片的网格列表。

实际发生的事情：

什么都没有显示。路由器插座再次导航到写入组件后保持黑色。当我单击其他导航按钮时，加载积压组件，然后再次单击“写入导航”按钮，将GRIDLIST正常加载。

navbar-component.html：

<mat-toolbar class="navbar navbar-dark bg-dark">       
        <mat-icon>menu</mat-icon>    
        <ng-container *ngIf="loggedIn ==='false' || loggedIn === null">
            <button routerLink="register" class="btn btn-outline-info mx-1" type="button">Register</button>
            <button routerLink="login" class="btn btn-outline-info mx-1" type="button">Login</button>
        </ng-container>
        <ng-container class="logged-in" *ngIf="loggedIn === 'true'">
            <div class="sub-menu-left">
                <!--<button (click)="openDialog()" class="btn btn-outline-info mx-1" type="button">New Backlog Item</button> -->
                <button (click)="navigate('dashboard/backlog')"  class="btn btn-outline-info mx-1" type="button">Backlog</button>
                <button (click)="navigate('dashboard/writeup')"  class="btn btn-outline-info mx-1" type="button">Write-up</button>
            </div>
            <div class="sub-menu-right">
                <button mat-mini-fab color="warn" aria-label="logout button with icon"
                (click)="logout()" class="btn btn-outline-info mx-1" type="button">
                  <mat-icon>logout</mat-icon>
                </button>
                <app-profile [profile]="profile"></app-profile>
            </div>
        </ng-container>     
</mat-toolbar>
<router-outlet></router-outlet>

navbar-component.ts：

import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
 
  constructor(
    private router: Router    
    ){}

  navigate(route:any) {    
    return this.router.navigate([route]);    
  }
  
}

witreup-component.html：

 <router-outlet></router-outlet>

witreup-component.ts：

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

@Component({
  selector: 'app-write-up',
  templateUrl: './write-up.component.html',
  styleUrls: ['./write-up.component.scss']
})
export class WriteUpComponent implements OnInit {
  
  constructor( private router: Router) { }

  ngOnInit(): void {
    this.router.navigate(['dashboard/writeup/index'])
  }

}

index-component.ts：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Writeup } from 'src/app/interfaces/writeup';

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss']
})
export class IndexComponent implements OnInit {
  
  list: Writeup[] = [
    {
      id:1,
      title:"title 1",
      subTitle: "subtitle 1",
      content: "some contnet",
      link:"www.somelink.com"
    },
    {
      id:2,
      title:"title 1",
      subTitle: "subtitle 1",
      content: "some contnet",
      link:"www.somelink.com"
    },
    {
      id:3,
      title:"title 1",
      subTitle: "subtitle 1",
      content: "some contnet",
      link:"www.somelink.com"
    }
  ]
  constructor(private router:Router) { }

  ngOnInit(): void {
  }
  showWriteUp(id:number) {
    this.router.navigate(['dashboard/writeup/show'])
  }
}

index-component.ts： index-component.html：

<mat-grid-list class="writeup-grid-list" cols="3" gutterSize="10px">
<mat-grid-tile *ngFor="let writeup of list">
    <mat-card (click)="showWriteUp(writeup.id)" class="writeup-card">
    <mat-card-title>{{ writeup.title }}</mat-card-title>
    <mat-card-subtitle>{{ writeup.subTitle }}</mat-card-subtitle>
    <mat-card-content>          
        <p>{{ writeup.content }}</p>
    </mat-card-content>
    <mat-card-actions>
        <button mat-button>{{ writeup.link }}</button>          
    </mat-card-actions>
    </mat-card></mat-grid-tile>    
</mat-grid-list>

app-routing.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
...
import { WriteUpComponent } from './components/write-up/write-up.component';
import { BacklogComponent } from './components/backlog/backlog.component';
import { ShowComponent } from './components/writeup/show/show.component';
import { IndexComponent } from './components/writeup/index/index.component';

const routes: Routes = [
...
  { path: 'dashboard', component: DashboardComponent,canActivate: [AuthGuardGuard],
      children: [
        
        { path: 'backlog', component: BacklogComponent },
        { path: 'writeup', component: WriteUpComponent,
          children: [
            { path: 'index', component: IndexComponent },
            { path: 'show', component: ShowComponent }
          ]
        },
      ]
}
];

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

未实现show-component但是“它有效”

Answer 1

使用此片段作为路线调试工具之后：

import { Component } from '@angular/core';
import { Router, Event, NavigationStart, NavigationEnd, NavigationError} from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  currentRoute: string;
  constructor(private router: Router) {
    this.currentRoute = "Demo";
    this.router.events.subscribe((event: Event) => {

        if (event instanceof NavigationEnd) {
            this.currentRoute = event.url;
              console.log(event);
        }


    });

}
}

我发现了问题。事实证明，我被路由到仪表板/写入，而不是仪表板/写入/索引，我仍然不确定为什么它在加载另一个组件后确实可以工作。我认为这与不再使用OnInit方法的写入组件有关。我删除了整个写入组件，只需在app-routing.module.ts中使用路径：'写入。这是多余的：

  { path:'register', component: RegisterComponent},
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent,canActivate: [AuthGuardGuard],
      children: [
        
        { path: 'backlog', component: BacklogComponent },
        { path: 'writeup',
          children: [
            { path: 'index', component: IndexComponent },
            { path: 'show', component: ShowComponent }
          ]
        },
      ]
}
];