angular - 自定义模块内的角度嵌套组件

Question

所以我正在尝试使用 angular v11 构建一些东西。

而我的项目结构是这样的

page-not-found 是一个组件，umum 是一个模块。

UmumModule 是延迟加载的，在 app-routing.module.ts 中声明

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  { path: '', redirectTo: '/public', pathMatch: 'full', },
  { path: 'public', loadChildren: () => import('./umum/umum-routing.module').then(m => m.UmumRoutingModule) },
  { path: '**', component: PageNotFoundComponent },
];

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

在 UmmModule 中，我创建了指向 LandingComponent 的路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LandingComponent } from './landing/landing.component';

const routes: Routes = [
  { path: '', component: LandingComponent }
];

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

此外，我还创建了另外 2 个组件：UmmModule 中的 SidebarComponent 和 SidebarContentComponent

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

import { UmumRoutingModule } from './umum-routing.module';
import { LandingComponent } from './landing/landing.component';
import { SidebarComponent } from './components/sidebar/sidebar.component';
import { SidebarContentComponent } from './components/sidebar-content/sidebar-content.component';


@NgModule({
  declarations: [
    SidebarComponent,
    SidebarContentComponent,
    LandingComponent,
  ],
  imports: [
    CommonModule,
    UmumRoutingModule
  ],
  exports: [
    SidebarComponent, SidebarContentComponent,
  ],
  bootstrap:[
    SidebarComponent,
    SidebarContentComponent,
  ]
})
export class UmumModule { }

这是 sidebar.component.ts

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

@Component({
  selector: 'public-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {

  public st = {
    show_menu: false,
  };

  constructor() { }

  ngOnInit(): void {
  }

  handleClick(){
    /**toggle sidebar */
  }

}

我想将 SidebarComponent 嵌套在 LandingComponent 视图中

<!-- <p>landing works!</p> -->

<public-sidebar></public-sidebar>


<header class="masthead d-flex"
    style="background-size: 100vw auto; background-position: center 100px; background-color: #ffde59">




    
    <div class="container text-center my-auto">

但它总是给我错误

非常感谢您的帮助。

Answer 1

该错误消息意味着在您尝试使用的模块内部<public-sidebar>，但该组件未注册。

确保：

• SidebarComponent在模块的声明数组中注册。据我所知，您可能希望在 umum.module 文件中注册它：

@NgModule({
  declarations: [SidebarComponent]
})
export class UmumModule {}

如果你有多个模块，你也可以使用导出数组，然后导入给定的模块：

@NgModule({
  declarations: [SidebarComponent],
  exports: [SidebarComponent]
})
export class SidebarModule {}

@NgModule({
  imports: [SidebarModule], // Make the <public-sidebar> tag available in your module.
})
export class UmumModule {}

Answer 2

谢谢大家帮助我，这是我的错误，我通过导入路由模块而不是导入模块来创建延迟加载，对不起，我的错误，非常感谢