만약 ''가 Angular 구성 요소 인 경우이 모듈의 일부인지 확인하십시오.
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
각도 성분이고, 다음이 모듈의 일부임을 확인. - 경우
my-component
웹 구성 요소 인 다음 추가CUSTOM_ELEMENTS_SCHEMA
받는 사람@NgModule.schemas
이 메시지를 표시하기 위해이 구성 요소의.
도와주세요.
에 MyComponentComponent
있어야합니다 MyComponentModule
.
그리고에서는 "내보내기"안에를 MyComponentModule
배치해야합니다 MyComponentComponent
.
이와 같은 것은 아래 코드를 참조하십시오.
@NgModule({
imports: [],
exports: [MyComponentComponent],
declarations: [MyComponentComponent],
providers: [],
})
export class MyComponentModule {
}
및 장소 MyComponentModule
에서을 imports
에 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 에서 자세히 알아볼 수 있습니다.
건배!
당신은 당신 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 {
}
아마도 이것은 html
태그 구성 요소의 이름입니다.
당신은에서 사용하는 html
이 같은<mycomponent></mycomponent>
이것을 사용해야합니다 <app-mycomponent></app-mycomponent>
파일 이름 에서 선택기를 확인하십시오.
다양한 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']
})
- 당신
MyComponentComponent
을 선언하십시오MyComponentModule
MyComponentComponent
에exports
속성 추가MyComponentModule
mycomponentModule.ts
@NgModule({
imports: [],
exports: [MyComponentComponent],
declarations: [MyComponentComponent],
providers: [],
})
export class MyComponentModule {
}
MyComponentModule
AppModuleimports
속성에 추가
app.module.ts
@NgModule({
imports: [MyComponentModule]
declarations: [AppComponent],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Important If your still have that error, Stop your server ctrl+c
from terminal, and run it again ng serve -o
Hope you are having app.module.ts
. In your app.module.ts
add below line-
exports: [myComponentComponent],
Like this:
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 { }
You must declare your MyComponentComponent in the same module of your AppComponent.
import { AppComponent } from '...';
import { MyComponentComponent } from '...';
@NgModule({
declarations: [ AppComponent, MyComponentComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
'Nice programing' 카테고리의 다른 글
std :: dynarray 대 std :: vector (0) | 2020.10.05 |
---|---|
OPTIONS 프리 플라이트 요청을 건너 뛰는 방법은 무엇입니까? (0) | 2020.10.05 |
Java 메서드 선언에서 throw를 사용하는 경우 (0) | 2020.10.05 |
서블릿이 "HTTP 상태 404 요청한 리소스 (/ servlet)를 사용할 수 없습니다."를 반환합니다. (0) | 2020.10.05 |
경고 : 상수 :: Fixnum은 새 모델을 생성 할 때 더 이상 사용되지 않습니다. (0) | 2020.10.05 |