角13组件在再次单击导航按钮后不显示。

Question

设想情况：

我有一个导航组件，根据单击哪个链接，导航到两个组件中的任何一个。对于写入组件，我首先显示一个带有卡片的网格列表。当单击卡片时，网格列表由显示组件交换，该显示组件通过写组件的路由器出口显示。到目前为止一切都很好但是..。

我期待的是：

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

实际发生了什么：

什么都没显示出来。再次导航到写入组件后，路由器出口仍然是黑色的。当我单击另一个导航按钮，从而加载待办事项处理组件，然后再次单击写入导航按钮时，网格列表将正常加载。

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>

导航杆-部件。

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]);    
  }
  
}

案头-组件.：

 <router-outlet></router-outlet>

写作-组件.：

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'])
  }

}

索引-组件。

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.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 { }

显示组件尚未实现，但“它可以工作”。

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方法有关。我删除了整个书面组件，只使用了path: 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 }
          ]
        },
      ]
}
];