이 기사에서는 Angular의 독립 구성 요소를 소개하고 간단한 독립 구성 요소를 만드는 방법과 이를 Angular 애플리케이션에서 사용하는 방법을 소개합니다.
Angular를 배우신다면 독립 컴포넌트(Component)에 대해 들어보셨을 것입니다. 이름에서 알 수 있듯이 독립 구성 요소는 다른 구성 요소에 포함되거나 참조될 수 있는 구성 요소입니다.
Angular 구성 요소를 만들려면 먼저 Angular CLI 도구를 사용하여 빈 구성 요소 뼈대를 생성해야 합니다. hello-world라는 구성 요소를 생성한다고 가정하면 다음 명령을 실행할 수 있습니다. hello-world 的组件，我们可以运行以下命令：
ng generate component hello-world
这个命令将会自动生成一个 hello-world 文件夹，其中包含了组件所需的所有文件，比如 Component 类、HTML 模板以及样式表。【相关教程推荐：《angular教程》】
现在我们可以编辑 hello-world.component.ts 文件来定义我们的组件类。下面这段代码示例演示了一个最小化的组件定义：
import { Component } from '@angular/core';
@Component({
selector: 'app-hello-world',
template: '<p>Hello World!</p>',
})
export class HelloWorldComponent {
}在这个组件定义中，我们使用 @Component 装饰器指定了组件的选择器（selector），也就是组件在模板中的标签名。同时，我们还确定了组件的 HTML 模板，它只是显示了一个 “Hello World!” 的段落标签。
接下来，我们可以修改 app.component.html 文件来使用这个新的组件。只需要将 <app-hello-world> 标签添加到该文件的适当位置即可。
<app-hello-world></app-hello-world>
现在打开应用程序，你应该能够看到 "Hello World!" 出现在页面上。
当使用组件时，我们通常需要传递一些数据给它，这些数据可以通过组件的输入属性来实现。
要定义一个组件输入属性，请在组件类中定义一个带有 @Input() 装饰器的属性。例如，假设我们要将组件的消息设置为用户提供的值：
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-hello-world',
template: '<p>{{message}}</p>',
})
export class HelloWorldComponent {
@Input() message: string;
}在这个修改后的 HelloWorldComponent 中，我们添加了一个 message 输入属性，并在模板中使用它来显示消息。
现在，在使用此组件时，我们可以将消息作为属性传递给它。例如：
<app-hello-world message="Welcome to my app!"></app-hello-world>
与输入属性相似，组件也可以通过输出事件来与其它组件进行通信。要定义一个输出事件，请使用 @Output() 装饰器以及 EventEmitter 类。
例如，假设我们要在组件中创建一个按钮，点击按钮时触发一个事件，我们可以定义如下：
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-button-with-click-event',
template: '<button (click)="onClick()">Click me</button>',
})
export class ButtonWithClickEventComponent {
@Output() buttonClick = new EventEmitter<any>();
onClick(): void {
this.buttonClick.emit();
}
}在这个组件中，我们创建了一个输出属性 buttonClick，并在 onClick() 方法中触发了该事件。
现在，在使用此组件时，我们只需要监听它的 buttonClick 事件即可：
<app-button-with-click-event (buttonClick)="onButtonClick()"></app-button-with-click-event>
最后，在父组件中实现 onButtonClick()rrreee
hello-world 폴더를 생성합니다. 구성 요소 클래스, HTML 템플릿, 스타일 시트 등 구성 요소에 필요한 파일입니다. [추천 관련 튜토리얼: "angular tutorial"]
이제 를 편집할 수 있습니다. 안녕하세요. -world.comComponent.ts 파일을 사용하여 구성 요소 클래스를 정의합니다. 다음 코드 예제는 최소 구성 요소 정의를 보여줍니다.
이 구성 요소 정의에서는 @Component 데코레이터를 사용하여 구성 요소의 선택기를 지정합니다. 즉, 구성 요소는 다음과 같습니다. 주형. 동시에 "Hello World!" 단락 태그만 표시하는 구성 요소의 HTML 템플릿도 결정했습니다.
다음으로 app.comComponent.html 파일을 수정하여 이 새로운 구성 요소를 사용할 수 있습니다. 파일의 적절한 위치에 <app-hello-world> 태그를 추가하기만 하면 됩니다.
이제 앱을 열면 페이지에 "Hello World!"가 나타나는 것을 볼 수 있습니다. 구성요소 입력
@Input() 데코레이터를 사용하여 속성을 정의하세요. 예를 들어, 구성 요소의 메시지를 사용자가 제공한 값으로 설정한다고 가정해 보겠습니다. 🎜rrreee🎜이 수정된 HelloWorldComponent에는 message 입력 속성을 추가했습니다. 템플릿에서 이를 사용하여 메시지를 표시합니다. 🎜🎜이제 이 구성 요소를 사용할 때 메시지를 속성으로 전달할 수 있습니다. 예: 🎜rrreee@Output() 데코레이터와 EventEmitter 클래스를 사용하세요. 🎜🎜예를 들어 구성 요소에 버튼을 만들고 버튼을 클릭하면 이벤트를 트리거한다고 가정해 보겠습니다. 🎜rrreee🎜이 구성 요소에서는 buttonClick> 출력 속성을 만듭니다. code>, 이 이벤트는 <code>onClick() 메서드에서 트리거됩니다. 🎜🎜이제 이 구성 요소를 사용할 때 buttonClick 이벤트만 수신하면 됩니다. 🎜rrreee🎜마지막으로 상위 구성 요소에 onButtonClick() 메서드를 구현합니다. 이 이벤트에 응답할 수 있습니다. 🎜🎜이번 블로그 게시물에서는 Angular 독립형 구성 요소의 개념과 이를 만들고 사용하는 방법을 심층적으로 살펴보았습니다. 먼저 독립 컴포넌트가 무엇인지, 왜 Angular 독립 컴포넌트를 사용하는지 소개했습니다. 🎜🎜Angular CLI를 사용하여 새로운 독립형 구성 요소를 쉽게 생성하는 방법을 자세히 살펴보고 입력, 출력 및 이벤트를 사용하여 구성 요소를 더욱 유연하고 다양하게 만드는 방법에 대해 논의합니다. 🎜🎜마지막으로 Angular 독립 구성 요소에서 모듈식 프로그래밍 접근 방식의 중요성을 강조합니다. 애플리케이션을 작고 독립적인 구성 요소로 분할함으로써 코드 기반을 더 잘 관리하고 더 읽기 쉽고 유지 관리하기 쉬운 코드를 얻을 수 있습니다. 🎜🎜이 장의 코드 예제를 사용하여 자체 독립 구성 요소 구축을 시작하고 애플리케이션에 더 많은 기능과 재사용성을 추가할 수 있습니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜
위 내용은 Angular에서 간단한 독립 컴포넌트를 생성하고 사용하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
