템플릿에 새로운 태그를 만들어 사용, 복잡한 코드를 알아보기 쉽게 하거나, 하나의 컴포넌트를 여러 곳에 만들어서 사용할 수 있음. 자식 컴포넌트의 selector를 부모 컴포넌트에 사용하면 됌.
1
2
3
4
5
6
7
8
9
10
11
12
13
| import { Component } from '@angular/core';
@Component({
selector: 'child-component',
template: '<h2 (click)="onClick()">자식 컴포넌트 {{ no }}</h2>',
})
export class ChildComponent {
no: number = 0;
onClick() {
this.no++;
}
}
|
1
2
3
4
5
6
7
8
| ...
import { ChildComponent } from '../components/child-component';
...
@NgModule({
declarations: [
...
ChildComponent
...
|
만들어준 컴포넌트를 declarations에 추가한다.
자식 컴포넌트는 entryComponent에 추가해줄 필요가 없다.
1
2
3
4
5
6
7
8
9
10
11
| import { Component } from '@angular/core';
import { ChildComponent } from '../components/child-component';
@Component({
template: `
<h2>이곳은 부모</h2>
<child-component></child-component>
`
})
export class ParentComponent {
}
|
Reference
https://www.youtube.com/watch?v=mB5eYtFwJR4&index=25&list=PLAiXlfcSCXYTA8k8AQX0sdRtvpOGkY7yq
Comment and share
