Angular의 컴포넌트(@Component)에 대한 기본 지식에 대한 간략한 토론

이 글에서는 Angular의 컴포넌트(@Component)에 대한 기본 지식을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

환경:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm: 6.14.6
• IDE: Visual Studio Code

1. 개요

구성 요소는 Angular 애플리케이션의 주요 구성 요소입니다. 각 구성 요소에는 다음 부분이 포함됩니다.

• 페이지에 렌더링할 콘텐츠를 선언하는 HTML 템플릿
• 동작을 정의하는 Typescript 클래스
• 템플릿에서 구성 요소가 사용되는 방식을 정의하는 CSS 선택기
• ( 선택사항) 템플릿에 적용할 CSS 스타일

Component는 페이지일 수도 있고 구성요소(컨트롤)일 수도 있습니다. 항상 페이지 요소입니다. [관련 튜토리얼 추천: "angular tutorial"]

모든 컴포넌트는 NgModule의 일부이므로 다른 애플리케이션 및 다른 컴포넌트에서 호출할 수 있습니다. NgModule의 멤버로 컴포넌트를 정의하려면 개발자는 NgModule의 선언 속성에 개발한 컴포넌트를 나열해야 합니다.

또한 개발자는 구성 요소 수정자(즉, @Component)를 통해 메타데이터를 구성할 수 있으므로 구성 요소는 다양한 수명 주기 후크를 통해 실행 환경을 제어할 수 있습니다.

2. 컴포넌트 생성

AngularCLI를 기반으로 컴포넌트를 쉽게 생성할 수 있습니다. 구성 요소를 생성하려는 디렉터리에서 다음 명령을 실행합니다.

ng generate component <component-name></component-name>

e.g. ng generate 구성 요소 MyComponent
AngularCLI는 자동으로 폴더와 4개의 파일을 생성합니다. 구성 요소 폴더(예: my-comComponent) ng generate component MyComponent
AngularCLI会自动生成一个文件夹和4个文件：

• 一个以该组件命名的文件夹（e.g my-component)
• 一个组件文件 .component.ts（e.g my-component.component.ts)
• 一个模板文件 .component.html（e.g my-component.component.html)
• 一个 CSS 文件， .component.css（e.g my-component.component.css)
• 测试文件 .component.spec.ts（e.g my-component.component.spec.ts)

对于Component，所有文件名都会自动增加Component后缀，所以不建议 中带有‘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 id="Hello-World">Hello World!</h1>',
})

3. 视图封装模式

在 Angular 中，组件的 CSS 样式被封装进了自己的视图中，而不希望影响到应用程序的其它部分。这部分也是可以通过配置去进行控制的。

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./my-component.component.css']
})

可以看到，增加了一个encapsulation

구성 요소 파일 .comComponent.ts(예: my-comComponent.comComponent.ts)

1. 템플릿 파일 .comComponent. html(예: my-comComponent.comComponent.html)
2. CSS 파일, .comComponent.css(예: my-comComponent.comComponent.css)
3. 테스트 파일 component.spec.ts(예: my-comComponent.comComponent.spec.ts)

Component의 경우 모든 파일 이름에 자동으로 Component 접미사가 추가되므로

:host {
}

위는 셀렉터(CSS selector), 템플릿(html) 파일, css 파일을 지정하는 핵심 ts 파일입니다. 필요한 경우 HTML/css 파일을 여러 구성 요소에서 공유할 수 있습니다. 특히 CSS의 경우 매개변수가 Array라는 것을 알 수 있어 여러 CSS를 구성할 수 있습니다.

2.1. 구성요소 템플릿

🎜🎜🎜구성요소 템플릿, 즉 HTML 부분은 html 파일이거나 html 설명일 수 있습니다. Angular 구성 요소에는 template 또는 templateUrl로 정의된 템플릿이 필요합니다. 그러나 한 구성 요소에 두 문을 동시에 포함할 수는 없습니다. 🎜🎜🎜1. HTML 파일 방식🎜🎜

@Component({
  selector: 'app-my-component',
  template: &#39;<h1 id="Hello-nbsp-World">Hello World!</h1>&#39;,
  styles: [&#39;h1 { font-weight: normal; }&#39;]
})

🎜🎜2. HTML 코드 방식🎜
🎜rrreee🎜🎜3. 뷰 캡슐화 모드🎜🎜🎜구성 요소의 CSS 스타일이 자체 뷰에 캡슐화됩니다. 응용 프로그램의 다른 부분에 영향을 주지 않고. 이 부분은 구성을 통해서도 제어할 수 있습니다. 🎜rrreee🎜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: &#39;<h1 id="Hello-nbsp-World">Hello World!</h1>&#39;,
  styles: [&#39;h1 { font-weight: normal; }&#39;]
})

4. 总结

• Angular CLI辅助创建一个component所需的多个文件
• 建议html/css/ts分开
• 在期望目录下执行Angular CLI命令，可以生成到制定目录
• ng generate component XXX 可以简写为 ng g c

更多编程相关知识，请访问：编程视频！！

위 내용은 Angular의 컴포넌트(@Component)에 대한 기본 지식에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!