Angular에서 상위 구성 요소와 하위 구성 요소 간에 데이터를 전송하는 방법에 대한 간략한 설명

이 글에서는 Angular에서 상위 구성 요소와 하위 구성 요소 간에 데이터를 전송하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

환경:

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

1. 요약

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

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

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

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

2. 부모-자식 @Input()

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

@Input() 데코레이터는 속성이 상위 구성 요소에서 값을 가져올 수 있음을 나타냅니다.

예:

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

1. @Input() 데코레이터의 변수를 추가합니다. 상위 구성 요소에서 데이터를 전달할 수 있다는 점을 제외하면 다른 논리는 일반 변수와 동일합니다. 하위 구성 요소의 html 코드에서 메시지 변수(예:

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

2.2) 상위 구성 요소가 하위 구성 요소에 변수를 전달합니다.상위 구성 요소가 하위 구성 요소를 호출하면 상위 구성 요소의 변수(예: messageToChild) 하위 구성 요소

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

messageToChild） 传递给子组件

export class ChildComponent {

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

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

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

3. 子传父 @Output()

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

3.1. 子组件定义@Output

子组件定义@Output

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

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

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

3.2. 父组件订阅事件

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

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

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

rrreee

事件绑定 (newItemEvent)='addItem($event)'에서 전달된 변수 message를 변경할 수 있지만 해당 범위는 하위 구성 요소에만 있습니다. 상위 구성 요소는 변경된 결과를 얻을 수 없습니다. (상위 구성 요소에 전달하는 방법은 계속 읽어보세요.)

3. 하위에서 상위로 @Output()

• Angular는 이벤트를 사용하여 상위 구성 요소에 데이터 변경 사항을 알립니다. 이벤트. .

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

하위 구성 요소 정의 @Output

rrreeeSubcomComponent 데이터가 변경되면 이 addNewItem 메서드를 호출하세요. 예를 들어 html rrreee

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

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