Angular 상위 구성요소와 하위 구성요소 간에 데이터를 전송하는 방법을 자세히 설명하는 기사

이 글에서는 Angular의 상위 컴포넌트와 하위 컴포넌트(Component) 간에 데이터를 전송하는 방법에 대해 설명하겠습니다. 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()을 사용하면 하위 구성 요소가 상위 구성 요소에 데이터를 보낼 수 있습니다.

부모에서 자식으로 @Input()

1. 자식 구성 요소 정의 @Input()

자식 구성 요소의 @Input() 데코레이터는 속성이 부모 구성 요소에서 값을 얻을 수 있음을 의미합니다. . [관련 튜토리얼 권장 사항: angular tutorial, Programming Teaching]

예:

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

하위 구성 요소 정의 @Output

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

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

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