在 Angular 为什么我的组件的 HTML 主体不显示？

Question

我可以很好地导航到该组件，header/sidebar 加载正常，甚至组件打字稿也能正常工作。

但是 HTML 的 none 正在显示。这是专门针对 dashboard/:id 路线的。

有什么想法吗？

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login.component';
import { DashboardComponent } from './views/dashboard/dashboard.component';

// Import Containers
import { DefaultLayoutComponent } from './containers';

// AuthGaurd
import { IdguardGuard as IdAuthGaurd } from './idguard.guard';
import { AdminGuard as AdminGuard } from './admin.guard';
import { ClientgaurdGuard as ClientAuthGaurd } from './clientgaurd.guard';


export const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'dashboard/:id',
        component: DashboardComponent,
        canActivate: [IdAuthGaurd, ClientAuthGaurd]
      },
      {
        path: 'base',
        loadChildren: () =>
          import('./views/base/base.module').then((m) => m.BaseModule),
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'top',
    anchorScrolling: 'enabled',
    relativeLinkResolution: 'legacy'
}),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Answer 1

您正在重定向到 home 但您没有 home 同一级别的路径：

改为：


export const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
  {
    path: 'home',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'dashboard/:id',
        component: DashboardComponent,
        canActivate: [IdAuthGaurd, ClientAuthGaurd]
      },
      {
        path: 'base',
        loadChildren: () =>
          import('./views/base/base.module').then((m) => m.BaseModule),
      }
    ]
  }
];

然后导航至 /home/dashboard/:id。

或：


export const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'dashboard/:id',
        component: DashboardComponent,
        canActivate: [IdAuthGaurd, ClientAuthGaurd]
      },
      {
        path: 'base',
        loadChildren: () =>
          import('./views/base/base.module').then((m) => m.BaseModule),
      }
    ]
  }
];

这将在导航不变的情况下工作。只需导航到 /dashboard/:id.

在 Angular 为什么我的组件的 HTML 主体不显示？

In Angular why will the HTML body of my component not show?

routes

typescript

angular