Angular 6 路由器导航未在目标组件中呈现子组件

Question

我有一个带有登录组件和仪表板组件的 Angular 6 应用程序。我正在尝试在登录按钮单击事件中导航到 DashboardComponent。 DashboardComponent 包含一个名为 WardComponent 的子组件。但是在导航到仪表板时，它只呈现子组件以外的内容 ward.How 我可以在登录后呈现带有子组件的仪表板组件吗？

请看下面我的组件类

应用组件

<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

只需像这样更改您的 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 {}

我在 path: '' 中添加了一个 pathMatch: 'full' 和一个 redirectTo: '/dashboard'。我还摆脱了 consts，然后将那些 consts 的路由添加到 routes const 本身。

您还必须在 DashboardComponent

的模板中添加 <router-outlet></router-outlet>

Answer 2

这是因为 ward 组件的内容没有正确填充。我在错误的地方添加了 wards 的内容，而不是在 WardComponent 中添加 wards 数组，我把它放在 AppComponent 中。

Answer 3

将 Ward 路由添加到 children 数组中

const routes: Routes = [
    indexRoutes,
    {
        path: "dashboard",
        component: DashboardComponent,
        children:[
        {
             path: "ward",
             component: WardComponent
        }]
    },
    fallbackRoutes
   ];

Angular 6 路由器导航未在目标组件中呈现子组件

Angular 6 Router navigation not rendering child component in the destination component

javascript

angular

angular2-routing

router-outlet