Как создать вложенную настройку маршрутизации в Angular - PullRequest
Новая
       12

Как создать вложенную настройку маршрутизации в Angular

0 голосов
/ 19 июня 2019

Я пытаюсь создать настройку вложенного маршрутизатора в angular

App> Core> General

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

Проблема IЯ наблюдаю, что 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 >
                 "):

1 Ответ

0 голосов
/ 19 июня 2019

Решение состоит в том, чтобы импортировать CommonModule в каждый из ваших модулей. 

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

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