Навигация по Angular 6 Router не отображает дочерний компонент в компоненте назначения

Question

У меня есть приложение Angular 6 с компонентом входа в систему и компонентом панели мониторинга.Я пытаюсь перейти к DashboardComponent на событие нажатия кнопки входа.DashboardComponent содержит дочерний компонент с именем WardComponent.Но при переходе к панели мониторинга она отображает только содержимое, отличное от дочернего компонента ward. Как я могу отобразить компонент панели мониторинга с дочерним компонентом после входа в систему?

См. Мои классы компонентов ниже

AppComponent

<router-outlet></router-outlet>

LoginComponent.ts

  export class LoginComponent {
  constructor(private router: Router) {}

  login() {
    this.router.navigate(["/dashboard/"]);
  }
}

DashboardComponent

import { Component } from "@angular/core";
@Component({
  selector: "dashboard",
  template: `
    haii u r in dashboard compo

    <div class="form-inline" style="padding: 40px;">
      <ward *ngFor="let ward of wards" [wardNumber]="ward"></ward>
    </div>
  `
})
export class DashboardComponent {
  constructor() {}
}

WardComponent.ts

import { Component, Input } from "@angular/core";
@Component({
  selector: "ward",
  template: `
    <div class="card bg-light mb-3" style="max-width: 18rem;">
      <div class="card-header"></div>
      <div class="card-body">
        <h2 class="card-title">{{ wardNumber + 1 }}</h2>
        <button class="btn btn-primary" (click)="checkIn()">check in</button>
        <button class="btn btn-primary" (click)="checkOut()">check Out</button>
      </div>
    </div>
  `
})
export class WardComponent {
  @Input() wardNumber: Number;
  checkedIn: boolean = false;
  constructor() {}

  checkIn() {
    console.log("checked in");
    this.checkedIn = true;
  }

  checkOut() {}
}

app.module.ts

  const indexRoutes: Route = {
  path: "",
  component: DashboardComponent
};
// for all invalid routers , it will redirect to login component
const fallbackRoutes = {
  path: "**",
  component: LoginComponent
};

const routes: Routes = [
  indexRoutes,

  {
    path: "dashboard",
    component: DashboardComponent
  },

  {
    path: "ward",
    component: WardComponent
  },

  fallbackRoutes
];

@NgModule({
  declarations: [
    AppComponent,
    WardComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

Это из-за того, что содержимое компонента ward заполнено неправильно. Я добавил содержимое wards в неправильном месте, вместо добавления массива wards в WardComponent, я поместил его в AppComponent.

Answer 2

Просто измените конфигурацию Routes следующим образом:

const routes: Routes = [
  {
    path: "dashboard",
    component: DashboardComponent,
    children: [{
      path: "ward",
      component: WardComponent
    }]
  },
  {
    path: "",
    pathMatch: "full",
    redirectTo: "/dashboard"
  },
  {
    path: "**",
    component: LoginComponent
  }
];

@NgModule({...})
export class AppModule {}

---

Я добавил pathMatch: 'full' и redirectTo: '/dashboard' на path: ''.Я также избавился от const s и затем добавил маршруты для этих const s к самому routes const.

Вы также должны будете добавить <router-outlet></router-outlet>к шаблону DashboardComponent