Question

我正在尝试导入在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>。希望这可以帮助您了解我的意图和用户界面目标。

我遵循了这个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吗？
- 完成

我该怎么做导入并使用PageComponent？

更新：多次重新启动CLI和VSCode后，错误突然消失了。但是，页面仍未显示<app-page>组件，其中包括<p>page works!</p>。

Answer 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)

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

您在PageComponent中设置的routerConfig将直接加载到<router-outlet>下方

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

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

从另一个模块导入的角度组件无法渲染

1 个答案: