javascript - “app-element”不是已知的 Angular 元素

Question

我尝试在 contact-me 组件中使用 contact-form 组件的选择器，但它给出错误“'app-contact-form'不是已知元素”？我的代码如下:

联系我.module.ts

        import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { ContactMeComponent } from './contact-me.component';
        import { ContactFormComponent } from './contact-form/contact-form.component';
        import { ContactFormModule } from './contact-form/contact-form.module';


       @NgModule({
            declarations: [ContactMeComponent, ContactFormComponent],
            imports: [
               CommonModule,
               ContactFormModule
            ],
            exports: [ContactMeComponent, ContactFormComponent]
         })
         export class ContactMeModule { }

联系表单.module.ts

        import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { ContactFormComponent } from './contact-form.component';
        import { FormsModule, ReactiveFormsModule } from '@angular/forms';



        @NgModule({
           declarations: [ContactFormComponent],
           imports: [
            CommonModule,
            FormsModule,
            ReactiveFormsModule
          ],
           exports: [ContactFormComponent]
        })
         export class ContactFormModule { }

联系我.component.html

         <app-contact-form></app-contact-form>

contact-form.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.scss']
})
export class ContactFormComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  contactForm = new FormGroup({
    projectTitle: new FormControl(''),
    fullName: new FormControl(''),
    emailAddress: new FormControl(''),
    phoneNumber: new FormControl('')
  });

}

contact-me 是应用模块中的路由之一。

这是我的控制台错误:

src/app/contact-me/contact-me.component.html:1:4 中出现错误 - 错误 NG8001:“app-contact-form”不是已知元素: 1. 如果“app-contact-form”是 Angular 组件，则验证它是否是该模块的一部分。 2. 如果“app-contact-form”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。

1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/contact-me/contact-me.component.ts:5:16 5 templateUrl: './contact-me.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件ContactMeComponent模板出错。

** Angular Live Development Server 正在监听 localhost:4200，打开浏览器 http://localhost:4200/ **

还需要什么或者我做错了什么？

Answer 1

从 contact-me.module.ts 中的 declarations 和 exports 中删除 ContactFormComponent 仅此而已。

说明:

您正在使用app-contact-form，它位于contact-form.module.ts内。因此，您必须从那里导出它才能在另一个模块中使用它。

然后，在需要 ContactFormComponent 的地方导入 ContactFormModule。在您的案例中，导入 contact-me.module.ts