Angular에서 상위 구성 요소와 하위 구성 요소 간에 데이터를 전송하는 방법에 대해 이야기해 보겠습니다.

Angular에서 상위 구성 요소와 하위 구성 요소 간에 데이터를 전송하는 방법은 무엇입니까? 다음 글에서는 Angular에서 상위 구성요소가 하위 구성요소에 데이터를 전달하는 방법과 하위 구성요소가 상위 구성요소에 데이터를 전달하는 방법을 소개하겠습니다.

환경:

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

구성 요소 상위 구성 요소와 하위 구성 요소 간에 데이터를 전송할 때 가장 중요한 것은 상위 구성 요소와 하위 구성 요소 간에 데이터를 전송하는 것입니다. 예:

<parent-component>
  <child-component></child-component>
</parent-component>

상위 구성 요소는 하위 구성 요소 데이터가 변경되는 동시에 하위 구성 요소에 데이터를 전달합니다. , 상위 구성요소에 알림이 전달될 수 있기를 바랍니다.

Angular에서는 @Input() 및 @Output()을 사용하여 하위 구성 요소가 상위 구성 요소와 통신할 수 있는 방법을 제공합니다. @Input()을 사용하면 상위 구성 요소가 하위 구성 요소의 데이터를 업데이트할 수 있습니다. 반대로 @Output()을 사용하면 하위 구성 요소가 상위 구성 요소에 데이터를 보낼 수 있습니다. [추천 관련 튜토리얼: "angular Tutorial"]

Father-to-child @Input()

1. 하위 구성 요소 정의 @Input()

@Input() 데코레이터는 속성은 상위 구성 요소에서 값을 얻을 수 있습니다.

예:

export class ChildComponent {
  @Input() message: string;
}

• @Input() 데코레이터 변수를 추가합니다. 데이터가 상위 구성 요소에서 전달될 수 있다는 점을 제외하면 다른 논리는 일반 변수와 동일합니다.

• 하위 구성 요소 메시지 변수의 html 코드(예:

<p>
  Parent says: {{message}}
</p>

2) 상위 구성 요소는 하위 구성 요소에 변수를 전달합니다

상위 구성 요소가 하위 구성 요소를 호출하면 상위 구성 요소의 변수(예: messageToChild ) 하위 구성 요소에 전달messageToChild） 传递给子组件

<child-component [message]="messageToChild"></child-component>

子组件中，可以更改message这个传入的变量，但是其作用域只在子组件中，父组件拿不到更改后的结果。（如何传给父组件，请接着看）

子传父 @Output()

Angular通过事件（Event）来实现子组件通知父组件数据的改变，父组件需要订阅该事件。

1. 子组件定义@Output

子组件定义@Output

export class ChildComponent {

  // EventEmitter ，这意味着它是一个事件
  // new EventEmitter<string>() - 
  // 使用 Angular 来创建一个新的事件发射器，它发出的数据是 string 类型的。
  @Output() newItemEvent = new EventEmitter<string>();

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

子组件当数据发生变化时，调用这个addNewItem方法既可。例如，html中

<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">Add to parent&#39;s list</button>

2. 父组件订阅事件

1、父组件的ts代码中，增加一个处理上面事件的方法，例如

addItem(newItem: string) {
    // logic here
}

2、父组件的html中，订阅该事件。

<child-component (newItemEvent)="addItem($event)"></child-component>

事件绑定 (newItemEvent)='addItem($event)'rrreee

하위 구성 요소에서 들어오는 변수 message는 변경될 수 있지만 해당 범위는 하위 구성 요소에만 있습니다. 상위 구성 요소는 변경된 결과를 얻을 수 없습니다. (상위 구성 요소에 전달하는 방법은 계속 읽어주세요.)

• 하위에서 상위로 전달 @Output()
  Angular는 이벤트를 사용하여 상위 구성 요소에 데이터 변경 사항을 알리고 상위 구성 요소는 이벤트를 구독해야 합니다. .

• 1. 하위 구성 요소 정의 @Output

하위 구성 요소 정의 @Outputrrreee

SubcomComponent 데이터가 변경되면 이 addNewItem 메서드를 호출하세요. 예를 들어 html 🎜rrreee🎜🎜🎜2에서는 상위 구성 요소가 🎜🎜🎜🎜1 이벤트를 구독합니다. 상위 구성 요소의 ts 코드에서 🎜rrreee🎜2와 같은 메서드를 추가합니다. 상위 구성 요소의 HTML에서 이벤트 이벤트를 구독합니다. 🎜rrreee🎜이벤트 바인딩 (newItemEvent)='addItem($event)'는 하위 구성 요소의 newItemEvent 이벤트를 상위 구성 요소의 addItem() 메서드에 연결합니다. 🎜🎜요약🎜🎜🎜🎜@Input() 및 @Output()을 사용하면 상위 구성 요소와 하위 구성 요소 간의 데이터 전송 및 공유를 쉽게 실현할 수 있습니다. 🎜🎜🎜🎜@Input()과 @Output()을 동시에 사용할 수 있습니다🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 학습🎜을 방문하세요! ! 🎜

위 내용은 Angular에서 상위 구성 요소와 하위 구성 요소 간에 데이터를 전송하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!