Question

我正在尝试创建有角度的嵌套路由器设置

App>核心>常规

app-routing.module.ts

const routes:Routes = [
    {path: 'core', loadChildren: './core/core.module#CoreModule', canActivate: [AuthGuard]}
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ],
    providers: []
})
export class AppRoutingModule {
}

core-routing.module.ts

const coreRoutes:Routes = [
    {
        path: '',
        component: CoreComponent,
        children: [
            { path: 'general', loadChildren: './general/general.module#GeneralModule' },
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(coreRoutes)],
    exports: [RouterModule]
})
export class CoreRoutingModule {
}

general-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: GeneralComponent,
    children: [
        { path: 'vendor/browser', component: VendorBrowserComponent },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class GeneralRoutingModule {}

我观察到的问题是Angular无法在嵌套模板中加载指令。

我在供应商模板中遇到此错误：

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("        </div>
          <div class="ui icon right-button">
              <div class="inline field" [ERROR ->]*ngIf="editPermission">
                  <ng-container >
                      <div class="ui toggle"): ng:///GeneralModule/VendorBrowserComponent.html@10:40
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
          </div>
          <div class="ui icon right-button">
              [ERROR ->]<div class="inline field" *ngIf="editPermission">
                  <ng-container >
                 "):

Answer 1

解决方案是在每个模块中导入CommonModule。

import { CommonModule } from '@angular/common'; 

@NgModule({
  imports: [CommonModule],
  declarations: [MyComponent]
  ...
})
class MyComponentModule {}

如何在Angular中创建嵌套的路由设置

1 个答案: