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

Question

<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 link post，如果允许我会添加它。谢谢。

Answer 1

问题在 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 ]

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

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

Component and router-outlet issue in Angular

components

router-outlet

angular