Angular 中的组件和路由器插座问题

问题描述

<div class="ui grid stackable">
  <div class="five wide column">
    <app-email-index></app-email-index>
  </div>
  <div class="eleven wide column">
    <router-outlet></router-outlet>
  </div>
</div>

我正在 Angular 中创建一个电子邮件客户端，VScode 没有报告任何问题，但是当我运行它时，它说错误“app-email-index”和“router-outlet”不是已知元素。我确信“app-email-index”元素是在运行它的“inBox-home”组件的同一个模块中声明的（因为它们是在同一个文件夹中创建的）。

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

import { InBoxRoutingModule } from './inBox-routing.module';
import { InBoxHomeComponent } from './inBox-home/inBox-home.component';
import { EmailCreateComponent } from './email-create/email-create.component';
import { EmailReplyComponent } from './email-reply/email-reply.component';
import { EmailIndexComponent } from './email-index/email-index.component';
import { EmailShowComponent } from './email-show/email-show.component';
import { PlaceholderComponent } from './placeholder/placeholder.component';
import { NotFoundComponent } from './not-found/not-found.component';



@NgModule({
  declarations: [ 
    EmailCreateComponent,EmailReplyComponent,EmailIndexComponent,EmailShowComponent,InBoxHomeComponent,PlaceholderComponent,NotFoundComponent,],imports: [
    CommonModule,InBoxRoutingModule
  ]
})
export class InBoxModule { }

我应该在哪里使用“router-outlet”和“app-email-index”解决这些问题？我不记得是否允许在问题帖子中有 github 链接，如果允许我会添加它。谢谢。

解决方法

问题在 AppModule 和 InboxModule 之间。当你实现一个子模块时，你必须在父模块中定义他的存在，在我们的例子中是 AppModule。所以你必须像这样导入 InboxModule 到你的 AppModule：

app.module.ts

import { InboxModule } from './inbox/inbox.module'; <--
...
  imports: [
    BrowserModule,AppRoutingModule,AuthModule,HttpClientModule,InboxModule <--
  ],

而且每个模块都有他的隐私。所以，如果一个模块，在我们的例子中 InboxModule 想要共享一个组件，它必须先导出它。因此，在 InboxModule 中，您必须通过添加以下代码导出 app-email-index，在我们的示例中为 EmailIndexComponent：

inbox.module.ts

exports: [ EmailIndexComponent ]

添加这两个之后你的问题就解决了！