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

【问题标题】：Angular 6 Router navigation not rendering child component in the destination componentAngular 6路由器导航未在目标组件中呈现子组件
【发布时间】：2019-05-02 14:48:14
【问题描述】：

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

请在下面查看我的组件类

应用组件

<router-outlet></router-outlet>

LoginComponent.ts

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

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

仪表板组件

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

【问题讨论】：

检查Dashboard中wards的内容，可能没有填充
你是对的，我在错误的地方添加了病房的内容，而不是在 WardComponent 中添加病房数组，我把它放在了 AppComponent.thanks 中

标签： javascript angular angular2-routing router-outlet

【解决方案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 {}

我已将pathMatch: 'full' 和redirectTo: '/dashboard' 添加到path: ''。我也摆脱了consts，然后将那些consts 的路由添加到routesconst 本身。

您还必须将<router-outlet></router-outlet> 添加到DashboardComponent 的模板中

【讨论】：

添加上述sn-p后，不再渲染登录组件，而是直接渲染仪表盘组件。我尝试通过添加 indexroutes 并呈现登录组件。但它仍然显示相同的行为，即使在添加路由器插座后也不会呈现子组件病房
@AnsarSamad，理想情况下，可以通过CanActivate 防护来阻止仪表板路径，以防止未经授权的访问。您可以实现一个，然后检查用户是否在警卫中登录。如果用户未登录，只需将用户导航到/login 路径。

【解决方案2】：

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

【讨论】：

【解决方案3】：

将 Ward 路由添加到子数组中

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

【讨论】：

OP本人前段时间已经回答了这个问题。发布答案时，请确保添加新的解决方案或更好的解释，尤其是在回答较旧的问题时。