이 글에서는 Angular의 컴포넌트(@Component)에 대한 기본 지식을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
환경:
- Angular CLI: 11.0.6
- Angular: 11.0.7
- Node: 12.18.3
- npm: 6.14.6
- IDE: Visual Studio Code
구성 요소는 Angular 애플리케이션의 주요 구성 요소입니다. 각 구성 요소에는 다음 부분이 포함됩니다.
Component는 페이지일 수도 있고 구성요소(컨트롤)일 수도 있습니다. 항상 페이지 요소입니다. [관련 튜토리얼 추천: "angular tutorial"]
모든 컴포넌트는 NgModule의 일부이므로 다른 애플리케이션 및 다른 컴포넌트에서 호출할 수 있습니다. NgModule의 멤버로 컴포넌트를 정의하려면 개발자는 NgModule의 선언 속성에 개발한 컴포넌트를 나열해야 합니다.
또한 개발자는 구성 요소 수정자(즉, @Component)를 통해 메타데이터를 구성할 수 있으므로 구성 요소는 다양한 수명 주기 후크를 통해 실행 환경을 제어할 수 있습니다.
AngularCLI를 기반으로 컴포넌트를 쉽게 생성할 수 있습니다. 구성 요소를 생성하려는 디렉터리에서 다음 명령을 실행합니다.
ng generate component <component-name>
e.g. ng generate 구성 요소 MyComponent
AngularCLI는 자동으로 폴더와 4개의 파일을 생성합니다. 구성 요소 폴더(예: my-comComponent) ng generate component MyComponent
AngularCLI会自动生成一个文件夹和4个文件：
对于Component，所有文件名都会自动增加Component后缀，所以不建议< component-name > 中带有‘component’这个单词。
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}以上是核心的ts文件，指定了selector(CSS 选择器)，template（html）文件，css文件。html/css文件如果需要可以多个component公用。尤其是css，可以看到参数是Array，所以可以制定多个css。
2.1. 组件模板
组件模板，即HTML部分，可以是一个html文件，也可以是一段html描述，是等价的。Angular 组件需要一个用 template 或 templateUrl 定义的模板。但你不能在组件中同时拥有这两个语句。
1、html 文件方式
@Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
})2、html代码方式
@Component({
selector: 'app-component-overview',
template: '<h1>Hello World!</h1>',
})在 Angular 中，组件的 CSS 样式被封装进了自己的视图中，而不希望影响到应用程序的其它部分。这部分也是可以通过配置去进行控制的。
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
encapsulation: ViewEncapsulation.None,
styleUrls: ['./my-component.component.css']
})可以看到，增加了一个encapsulation
Component의 경우 모든 파일 이름에 자동으로 Component 접미사가 추가되므로 < > :host {
}
2.1. 구성요소 템플릿
🎜🎜🎜구성요소 템플릿, 즉 HTML 부분은 html 파일이거나 html 설명일 수 있습니다. Angular 구성 요소에는 template 또는 templateUrl로 정의된 템플릿이 필요합니다. 그러나 한 구성 요소에 두 문을 동시에 포함할 수는 없습니다. 🎜🎜🎜1. HTML 파일 방식🎜🎜@Component({
selector: 'app-my-component',
template: '<h1>Hello World!</h1>',
styles: ['h1 { font-weight: normal; }']
})encapsulation 속성(캡슐화 모드 보기)이 추가된 것을 확인할 수 있습니다. 구성 요소의 메타데이터에 보기 캡슐화 모드를 설정하여 각 구성 요소의 캡슐화 모드를 개별적으로 제어할 수 있습니다. 선택적 캡슐화 모드는 다음과 같습니다. 🎜🎜🎜에뮬레이트 모드(기본값)는 CSS 스타일을 구성 요소 뷰로 제한하는 목적을 달성하기 위해 CSS 코드를 전처리(및 이름 변경)하여 Shadow DOM의 동작을 시뮬레이션합니다. 자세한 내용은 부록 1을 참조하세요. (참고: 전역 스타일은 들어오지 않고 들어오기만 하며 구성 요소 스타일은 나갈 수 없습니다.) 🎜🎜ShadowDom 모드는 브라우저의 기본 Shadow DOM 구현을 사용하여 구성 요소의 호스트 요소에 Shadow DOM을 연결합니다. 구성 요소의 뷰는 이 Shadow DOM에 연결되고 구성 요소의 스타일도 이 Shadow DOM에 포함됩니다. (설명: 시작이나 종료가 없으며 스타일이 들어올 수 없으며 구성 요소 스타일이 나갈 수 없습니다.) 🎜🎜None은 Angular가 뷰 캡슐화를 사용하지 않음을 의미합니다. Angular는 전역 스타일에 CSS를 추가합니다. 앞서 설명한 범위 지정 규칙, 격리 및 보호는 적용되지 않습니다. 기본적으로 이는 구성 요소의 스타일을 HTML에 직접 입력하는 것과 같습니다. 🎜🎜🎜🎜🎜3.1. 특수 선택기 :host🎜🎜🎜🎜 :host 의사 클래스 선택기를 사용하여 구성 요소 호스트 요소의 요소를 선택합니다(구성 요소 템플릿 내부 요소와 관련). :host 옵션은 호스트 요소를 대상으로 지정하는 유일한 방법입니다. 그렇지 않으면 호스트가 구성 요소 자체 템플릿의 일부가 아니라 상위 구성 요소 템플릿의 일부이기 때문에 호스트를 지정할 수 없습니다. 🎜🎜예🎜:host {
}3.2. inline-styles
默认AngularCLI生成的component，css在一个单独文件中。当然，同html模板类似，如果需要，你也可以制定css样式写在ts中， 不单独放到一个文件中。命令：ng generate component MyComponent --inline-style。
生成component如下
@Component({
selector: 'app-my-component',
template: '<h1>Hello World!</h1>',
styles: ['h1 { font-weight: normal; }']
})ng generate component XXX 可以简写为 ng g c
更多编程相关知识，请访问：编程视频！！
위 내용은 Angular의 컴포넌트(@Component)에 대한 기본 지식에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
