我是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中。模式来抑制此消息。
请帮助。
不要导出默认的MyComponentComponent类!
与标题相关的问题，如果不是具体的问题:
我不小心做了一个…
export default class MyComponentComponent {
．.． 这也把事情搞砸了。
为什么?当我把它放入声明时，VS Code添加了导入到我的模块，但不是…
import { MyComponentComponent } from '...';
它有
import MyComponentComponent from '...';
这并没有向上映射到下游，假设因为它没有在默认导入的任何地方“真正”命名。
export class MyComponentComponent {
没有违约。利润。
在MyComponentModule中声明你的MyComponentComponent
将你的MyComponentComponent添加到MyComponentModule的exports属性中
mycomponentModule.ts
@NgModule({
imports: [],
exports: [MyComponentComponent],
declarations: [MyComponentComponent],
providers: [],
})
export class MyComponentModule {
}
将MyComponentModule添加到AppModule imports属性中
app.module.ts
@NgModule({
imports: [MyComponentModule]
declarations: [AppComponent],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
重要的是如果你仍然有这个错误，停止你的服务器从终端ctrl+c，并再次运行ng serve -o
不要导出默认的MyComponentComponent类!
与标题相关的问题，如果不是具体的问题:
我不小心做了一个…
export default class MyComponentComponent {
．.． 这也把事情搞砸了。
为什么?当我把它放入声明时，VS Code添加了导入到我的模块，但不是…
import { MyComponentComponent } from '...';
它有
import MyComponentComponent from '...';
这并没有向上映射到下游，假设因为它没有在默认导入的任何地方“真正”命名。
export class MyComponentComponent {
没有违约。利润。
希望你有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 { }
检查filename. ponent.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']
})
