从另一个模块导入的 Angular 组件不呈现

Posted 2023-02-22

【中文标题】从另一个模块导入的 Angular 组件不呈现

【英文标题】：Angular component imported from another Module doesn't render

【发布时间】：2020-01-17 22:05:50

【问题描述】：

我正在尝试导入 PageComponent，它在 PageModule 中声明。我通过运行ng g m page && cd page && ng g c page 创建了它们，但未能将PageComponent 导入应用程序的app.component.html。

我正在创建的 UI 将有一个固定的侧边栏和一个 <app-page>，其中将包含主要视图。编辑：我正在使用 ngx-admin 并且是 Angular 的新手。我不明白他们对<router-outlet> 的使用，它是所有视图的根组件/占位符，所以我正在尝试创建自己的<app-page>。希望这可以帮助您理解我的意图和 UI 目标。

我遵循了这个 SO 答案中的清单：

Angular 2 'component' is not a known element

您确定名称正确吗？ （还要检查组件中定义的选择器）

已检查，见下文

在模块中声明组件？如果在其他模块，导出组件？

是的。在page.module.ts 里面，我有：

import  PageComponent  from './page.component';
import  CommonModule  from '@angular/common';
// import ...;

@NgModule(
  declarations: [PageComponent],
  imports: [
    PagesRoutingModule,
    CommonModule
  ],
  exports: [PageComponent]    // This line exports, right?
)
export class PageModule  

还有page.component.ts：

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

@Component(
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.css']
)
export class PageComponent implements OnInit 
  constructor()  

  ngOnInit()  

如果它在另一个模块中，导入那个模块？

在app.module.ts：

import  PageModule  from './page/page.module';
// import ...;

@NgModule(
  declarations: [
    AppComponent
  ],
  imports: [
    // ...,
    PageModule    // PageComponent should be available from now on
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

还有app.component.html，其中<app-page>没有解析：

<nb-layout>
  <nb-sidebar>
    <nb-menu [items]="menu"></nb-menu>
  </nb-sidebar>

  <app-page></app-page>
</nb-layout>

重启 cli？

完成

我可以做什么来import和使用PageComponent？

更新：多次重启 CLI & VSCode 后，错误突然消失。但是，该页面仍然没有显示 <app-page> 组件，其中包含一个 <p>page works!</p>。

【问题讨论】：

发布您的组件代码

我刚刚更新了它@Sajeetharan-MSFT

先在nb-layout中尝试不使用wrappin

你的app-root在哪里？尝试在根组件中使用相同的代码，即app.components.ts/app.component.html，看看它是否显示了你想要的逻辑。如果是，那么您在正确的位置导入/显示有问题。如果不是，那么这是应该显示它的代码的问题。顺便说一句，您在控制台中是否有任何错误（您可以使用例如 Chrome DevTools 进行检查）？

请也发布错误信息。 :)

【参考方案1】：

好的，所以我创建了一个导入模块并能够使用它的组件的最小示例。您提供的示例应该可以工作，所以如果不查看实际项目，我不确定问题到底是什么。 （请注意保留项目本地历史的导入或扩展，因为您可能会错误地导入旧模块文件）

演示：https://stackblitz.com/edit/angular-mtah9b?file=src%2Fapp%2Fpage%2Fpage.module.ts

---

<router-outlet> 用于 Angular 中的路由。

Angular 的 RouterModule 将采用您提供的配置对象并设置路由。

// 一些路由模块

const routesConfig = [
    path: 'page' component: PageComponent 
];
RouterModule.forRoot(routesConfig) // For Root Module (Usually in AppRouting Module)
RouterModule.forChild(routesConfig) // Child Modules (Usually Lazy Modules)

如果 url 与您在路由配置中设置的路径匹配。 （例如https://myapp.com/page）

你在routerConfig中设置的PageComponent会在<router-outlet>下面直接加载

<router-outlet></router-outlet>
<!-- Loaded from url match! -->
<app-page></app-page>

不过，这是一个过于简单的答案，您应该阅读 Angular 的 docs 以充分利用路由器或查看我来自 summary docs 的个人笔记