我是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 {

}

显示两个错误:

如果my-component是一个Angular组件,那么验证它是否是这个模块的一部分。 如果my-component是Web组件,那么将CUSTOM_ELEMENTS_SCHEMA添加到@NgModule中。模式来抑制此消息。

请帮助。


当前回答

转到tsconfig。json文件。把这段代码写在angularCompilerOption下:

 "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true,
     **"enableIvy": false**
 }

其他回答

希望你有app.module.ts。 在app.module.ts中添加以下行-

 exports: [myComponentComponent],

是这样的:

import { NgModule, Renderer } from '@angular/core';
import { HeaderComponent } from './headerComponent/header.component';
import { HeaderMainComponent } from './component';
import { RouterModule } from '@angular/router';

@NgModule({
    declarations: [
        HeaderMainComponent,
        HeaderComponent
    ],
    imports: [
        RouterModule,
    ],
    providers: [],
    bootstrap: [HeaderMainComponent],
    exports: [HeaderComponent],
})
export class HeaderModule { }

你的MyComponentComponent应该在MyComponentModule中。

在MyComponentModule中,你应该把MyComponentComponent放在“exports”中。

类似的代码,请参见下面的代码。

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

export class MyComponentModule {
}

并像这样将MyComponentModule放在app.module.ts的导入中(参见下面的代码)。

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

检查父组件在哪个模块中被声明…

如果父组件定义在共享模块中,那么子模块也必须定义在共享模块中。

父组件可以在共享模块中声明,而不是在基于文件目录结构/命名的逻辑模块中声明,即使在我的例子中,Angular CLI也将它添加到错误的模块中。

在你的components.module.ts中,你应该像这样导入IonicModule 这样的:

import {IonicModule} from '@ionic/angular';

然后像这样导入IonicModule:

  imports: [
    CommonModule,
    IonicModule
  ],

所以你的components.module.ts会像这样:

import { CommonModule } from '@angular/common';
import {PostComponent} from './post/post.component'
import { IonicModule } from '@ionic/angular';

@NgModule({
  declarations: [PostComponent],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [PostComponent]
})
export class ComponentsModule { }```

你必须在你的AppComponent的同一个模块中声明你的MyComponentComponent。

import { AppComponent } from '...';
import { MyComponentComponent } from '...';

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