如果'<selector>'是Angular组件,则验证它是否是此模块的一部分

Question

我是Angular2的新手.我试图创建一个组件,但显示错误.

这是app.component.ts文件.

import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component.component';

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <my-component></my-component>
  `,
  directives: [MyComponentComponent]
})
export class AppComponent { name = 'Sam' }

这是我想要创建的组件.

import { Component } from '@angular/core';

@Component({
selector: 'my-component',
template: `
    <p>This is my article</p>
`
})

export class MyComponentComponent {

}

显示两个错误:

1. 如果my-component是Angular组件,则验证它是否为此模块的一部分.
2. 如果my-component是一个Web组件,然后添加CUSTOM_ELEMENTS_SCHEMA到@NgModule.schemas该组件来抑制此消息.

请帮忙.

Answer 1

您的"MyComponentComponent"应位于"MyComponentModule"中.

在"MyComponentModule"中,您应该将"MyComponentComponent"放在"exports"中.

像这样的东西,见下面的代码.

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

并将"MyComponentModule"放在"app.module.ts"中的"imports"中(如下所示).

import { MyComponentModule } from 'your/file/path';

@NgModule({
   imports: [MyComponentModule]
   declarations: [AppComponent],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule {}

完成后,应用程序现在可以识别组件的选择器.

您可以在此处了解更多信息:https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

干杯!

Answer 2

也许这是html标签组件的名称

你使用这样的html东西<mycomponent></mycomponent>

你必须使用它 <app-mycomponent></app-mycomponent>

Answer 3

你是在app.module.ts这样导入它并删除指令位: -

@NgModule({
    bootstrap: [AppComponent],
    imports: [MyComponentModule],// or whatever the name of the module is that declares your component.

    declarations: [AppComponent],
    providers: []
})
export class AppModule {}

你MyComponentModule应该是这样的: -

@NgModule({
    imports: [],
    exports: [MyComponentComponent],
    declarations: [MyComponentComponent],
    providers: [],
})
export class MyComponentModule {
}

Answer 4

就我而言，我正在为使用子组件的组件编写单元测试，并且我正在编写测试以确保这些子组件在模板中：

it('should include the interview selection subview', () => {
    expect(fixture.debugElement.query(By.css('app-interview')))
    .toBeTruthy()  
  }); 

我没有收到错误，而是收到警告：

警告：“app-interview”不是已知元素：

1. 如果“app-interview”是一个 Angular 组件，那么验证它是否是这个模块的一部分。警告：“app-interview”不是已知元素：
2. 如果“app-interview”是一个 Angular 组件，那么验证它是否是这个模块的一部分。
3. 如果“app-interview”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。

此外，子组件在测试期间没有显示在浏览器中。

我曾经ng g c newcomponent生成所有组件，所以它们已经在 appmodule 中声明，但不是我指定的组件的测试模块。

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EditorComponent,
        InterviewComponent]
    })
    .compileComponents();
  }));

Answer 5

在filename.component.ts中检查选择器

我会说在各种HTML文件中使用标记

<my-first-component></my-first-component>

应该

<app-my-first-component></app-my-first-component>

例

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.scss']
})

Answer 6

1. 宣布你MyComponentComponent在MyComponentModule
2. 将您的属性 添加MyComponentComponent到exportsMyComponentModule

mycomponentModule.ts

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

3. 将您的属性添加MyComponentModule到您的 AppModuleimports属性中

应用程序模块.ts

    @NgModule({
       imports: [MyComponentModule]
       declarations: [AppComponent],
       providers: [],
       bootstrap: [AppComponent]
    })
    export class AppModule {} 

重要如果您仍然遇到该错误，请从终端停止服务器ctrl+c，然后再次运行ng serve -o