自定义模块内的角度嵌套组件答案

【问题标题】：angular nested component inside a custom module自定义模块内的角度嵌套组件
【发布时间】：2021-02-26 20:51:24
【问题描述】：

所以我正在尝试使用 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 { }

在 UmumModule 中，我创建了指向 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 { }

另外，我在 UmumModule 中创建了另外 2 个组件：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">

但它总是给我错误

非常感谢您的帮助。

【问题讨论】：

你在app.module中声明public-directives了吗？
我打算只在 umum.module 中使用 public-directive，所以我只在 umum.module 中声明了它
你在app.module中导入umum.module了吗？
不，我懒加载 umum 模块

标签： angular angular-directive angular11

【解决方案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 {}

【讨论】：

您好，感谢您的快速响应。是的，我在声明数组中的 UmumModule 中注册了它，但仍然出现相同的错误。我编辑了问题以包括我的 UmumModule 的屏幕截图。我错过了什么吗？
好的，你在哪个模块注册了LandingComponent？如果它不在同一个模块中，则必须使用我的回答中的导入/导出方法。欢呼
我在 UmumModule 中注册了 SidebarComponent。并且 LandingComponent 也在 UmumModule 中。
奇怪 - 你试过重启你的 ng 服务吗？也许这只是一个小插曲。
是的，这很奇怪。我已经多次重启 ng 服务。也许我需要重新启动我的笔记本电脑

【解决方案2】：

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

【讨论】：