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

关于home模块和侧边栏组件，最佳做法是保持“ app.module”尽可能干净。

如果要在所有授权的模块（例如home）中添加用于布局的组件，我将创建一个名为“ layout”的新模块。

--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.component.html - 服务 -守卫 -拦截器

要在主页模块中使用此模块中的组件，您需要将其添加到 shared.module.ts 文件的 export 数组中：

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

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

    //3rd party components

  ]
})

现在，您需要在home模块中导入共享模块，并且可以使用添加到导出阵列中的所有组件。

我希望它会有所帮助。如果不清楚，我可以更新答案。

编辑： 抛出异常是因为“ opened”不是ng-sidebar的属性，因此您不能将其用作输入：

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

Answer 2

我的建议是从延迟加载的HomeModule中导入SidebarModule，从而使Sidebar Component声明和导入保持彼此接近：-）

具有自定义组件的角型延迟加载模块

2 个答案: