Nice programing

만약 '

nicepro 2020. 10. 5. 20:55
반응형

만약 ''가 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 {

}

두 가지 오류 표시 :

  1. 경우 my-component각도 성분이고, 다음이 모듈의 일부임을 확인.
  2. 경우 my-component웹 구성 요소 인 다음 추가 CUSTOM_ELEMENTS_SCHEMA받는 사람 @NgModule.schemas이 메시지를 표시하기 위해이 구성 요소의.

도와주세요.


MyComponentComponent있어야합니다 MyComponentModule.

그리고에서는 "내보내기"안에를 MyComponentModule배치해야합니다 MyComponentComponent.

이와 같은 것은 아래 코드를 참조하십시오.

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

export class MyComponentModule {
}

및 장소 MyComponentModule에서을 importsapp.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']
})

  1. 당신 MyComponentComponent선언하십시오MyComponentModule
  2. MyComponentComponentexports속성 추가MyComponentModule

mycomponentModule.ts

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

export class MyComponentModule {
}
  1. MyComponentModuleAppModule imports속성에 추가

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 {}

참고URL : https://stackoverflow.com/questions/43937387/if-selector-is-an-angular-component-then-verify-that-it-is-part-of-this-mod

반응형