Угловые ленивые загрузочные модули с пользовательскими компонентами

Question

Я новичок в Angular и использую лени-загруженные модули с угловой маршрутизацией, но у меня проблема с компонентами.Я могу иметь компоненты для всех модулей (например, ToastComponent) и компонент только для определенного модуля (например, SidebarComponent), связанного с компонентом, показанным при маршрутизации.Я думал, что в app.module.ts есть глобальные модули, а в отдельных модулях - единственный компонент, но он не работает.У меня есть app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    ToastComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AccordionModule,
    BrowserAnimationsModule,
    ButtonModule,
    SidebarModule.forRoot(),
    TooltipModule,
    AppRoutingModule,
    NgxSpinnerModule,
    ToastModule,
    FormsModule,
    ReactiveFormsModule,
    JwtModule.forRoot({
      config: {     
        tokenGetter: () => {
          return localStorage.getItem(environment.tokenName);
        },
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 
}

app-routing.ts:

const routes: Routes = [
  { path: 'login', loadChildren: './login/login.module#LoginModule'},
  { path: '', loadChildren: './home/home.module#HomeModule'}
];

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

home.module.ts

@NgModule({
    imports: [
    CommonModule,
    MenubarModule,
    HomeRoutingModule
  ],
  declarations: [
    HeaderComponent,
    ContentRightComponent,
    SidebarComponent,  
    HomeComponent
  ]
})
export class HomeModule { }

home.component.html

<app-header (sidebarEvent)="sidebarEvent($event)"></app-header>
<app-sidebar [opened]="opened" (sidebarEventChiusura)="sidebarEventChiusura()" ></app-sidebar> 

home.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  private title = 'Configurator';
  private opened: boolean = false;
  constructor() { }

  ngOnInit() {
  }

  sidebarEvent(visible: boolean){
    this.opened = !this.opened;
  } 
  sidebarEventChiusura(opened:boolean){
    this.opened=opened;
  }
}

sidebar.component.html:

<ng-sidebar-container   style="height: 100vh;">
    <ng-sidebar #sidebar mode="push" dock="true" dockedSize="60px" position="left" [(opened)]="opened" >
        <div id="content-sidebar">
            <p>Sidebar contents</p>
        </div>
        <button class="btn btn-light float-right" (click)="chiudiSidebar()" *ngIf="!opened" style="width:60px">
            <i class="pi pi-angle-double-right"></i>
        </button>
        <button class="btn btn-light float-right" (click)="chiudiSidebar()" *ngIf="opened" style="width:15vw">
            <i class="pi pi-angle-double-left"></i>
        </button>
    </ng-sidebar>
    <div id="content-right" ng-sidebar-content >
        <app-content-right></app-content-right>
    </div>
</ng-sidebar-container>

Я получаю эту ошибку несколько раз:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'opened' since it isn't a known property of 'ng-sidebar'.
1. If 'opened' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("eight: 100vh;">
    <ng-sidebar #sidebar mode="push" dock="true" dockedSize="60px" position="left" [ERROR ->][(opened)]="opened" >
        <div id="content-sidebar">
            <p>Sidebar contents</p>
"): ng:///HomeModule/SidebarComponent.html@1:83
'ng-sidebar' is not a known element:
1. If 'ng-sidebar' is an Angular component, then verify that it is part of this module.
2. If 'ng-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<ng-sidebar-container   style="height: 100vh;">
    [ERROR ->]<ng-sidebar #sidebar mode="push" dock="true" dockedSize="60px" position="left" [(opened)]="opened" >
"): ng:///HomeModule/SidebarComponent.html@1:4
'ng-sidebar-container' is not a known element:

Вы помогаете мне это исправить?Спасибо

Answer 1

Что касается домашнего модуля и компонента боковой панели, лучше всего поддерживать ваш app.module как можно более чистым.

Я бы создал новый модуль под названием «макет», где вы добавите компоненты, которые используются для макета, во всех авторизованных модулях, например home.

--layout
 --components
   --layout
      --layout.component.html
   --sidebar
      --sidebar.component.html
   -- etc, the rest of the components that are used globally
 --services

Макет будет вашим основным компонентом, который будет включать боковую панель и будет иметь элемент router-outlet для лениво загруженных потомков.

<div class="container">
     <app-side-bar></app-side-bar>
     <router-outlet></router-outlet>
</div>

Теперь в вашем HomeRoutingModule файле вам нужно добавить массив маршрутов следующим образом:

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      { path: 'home', component: HomeComponent }
    ]
  }
];

Для компонента toast рекомендуется создать новый модуль с именем «shared», в котором будут храниться все компоненты, службы, средства защиты, перехватчики. В основном все, что не связано с конкретным модулем. --общий --компоненты --тост --toast.component.html --Сервисы --guards --interceptors

Чтобы использовать компонент из этого модуля в домашнем модуле, необходимо добавить его в массив export в файле shared.module.ts :

@NgModule({
  declarations: [ToastComponent],
  imports: [
    CommonModule,

    //3rd party components
  ],
  exports: [
    our own custom components
    ToastComponent,

    //3rd party components

  ]
})

Теперь вам нужно импортировать общий модуль в домашний модуль, и вы можете использовать все компоненты, добавленные в массив экспорта.

Надеюсь, это поможет. Если что-то не понятно, я могу обновить свой ответ.

EDIT: Исключение выдается, потому что "открытое" не является свойством боковой панели ng, поэтому вы не можете использовать его в качестве ввода:

<ng-sidebar #sidebar mode="push" dock="true" dockedSize="60px" position="left" [(opened)]="opened" >