Angular에서 @Input()은 무엇에 사용됩니까?

Angular에서 @Input()은 무엇에 사용됩니까?

저는 angular.io 에서 기능 구성 요소 만들기 튜토리얼을 공부하던 중에 다음과 같은 것을 발견했습니다.@Input장식자 특성:

// src/app/hero-detail/hero-detail.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;

  constructor() { }
  ngOnInit() { }
}

란?@Input()그리고 그것은 무엇에 사용됩니까?

이 예에서 hero-detail은 하위 구성 요소이며, 'hero' 데이터를 포함하는 상위 구성 요소에 삽입되어야 하며, 'hero' 데이터는 @Inputdecorator에 의해 입력으로 표시된 hero 인스턴스 변수를 통해 hero-detail 구성 요소로 전달됩니다.

기본적으로 구문은 다음과 같습니다.

hero.interface.ts 파일에서 Hero 인터페이스를 가져옵니다. 이것은 Hero 클래스의 정의입니다.

import { Hero } from "./hero";

입력 장식기를 사용하여 다음 인스턴스(instance) 변수를 상위 구성 요소가 데이터를 전달할 수 있도록 합니다.

@Input()

Hero 인스턴스 변수 자체는 위에서 가져온 인터페이스인 Hero 유형입니다.

hero: Hero;

상위 구성 요소는 이 hero-detail 자식 구성 요소를 사용하고 다음과 같이 hero 데이터를 HTML 템플릿에 삽입하여 전달합니다.

<hero-detail [hero]="hero"></hero-detail>

여기서 상위 구성 요소에는 데이터를 포함하는 'hero'라는 인스턴스 변수가 있고 이 변수는 hero-detail 구성 요소로 전달됩니다.

@Input() hero는 것을 의미합니다.hero에서 이 를 들어 "" " " " " " " 입니다.

<hero-detail [hero]="(object of hero)"> </hero-detail>

여기서 나는 영웅적인 목적을 전달합니다.hero상위 구성 요소에서 세부 구성 요소로 이동합니다.

1. @Input 요소 합니다.

@Inputselector는 셀렉터에 속성을 만듭니다.그래서 사용하기@Input() hero_name: string순식간에child.component.ts는 " 라속생성다니합을성는다"라는 합니다.hero_name.

parent.component.html은 다음과: 이은다같습니다과음것.<app-child hero_name='Batman'></app-child>.

child.component.ts은 다을사여이값수있액다습니할을 사용하여 할 수 .this.hero_name.

@Input에 다른 이름 사용

@Input() hero_name: string의 줄임말입니다.@Input('hero_name') hero_name: string당신은 그것이 더 편리하다면 다른 이름을 할당할 수 있습니다.

예:@Input('hero_name') name: string.

parent.component.html은 다음과: 이은다같습니다과음것.<app-child hero_name='Batman'></app-child>.

child.component.ts은 다을사여이값수있액다습니할을 사용하여 할 수 .this.name.

그것을 재산의 구속과 합치다.

만약 당신이 이것을 속성 바인딩과 결합한다면 당신은 이제 당신의 물건이나 무엇이든 얻을 수 있습니다.parent.component.ts그리고 그것을 당신에게 전달합니다.child-component.ts.

예:

child.component.ts

@Component({...})
export class ChildComponent {
  @Input('selected_hero') superhero: Hero;
  
  public some_function() {
    console.log(this.superhero);
  }
}

parent.component.vmdk

<app-child [selected_hero]='hero'></app-child>

parent.component.ts

@Component({...})
export class ParentComponent {
  public hero: Hero = new Hero();
}

간히으, 사로써함을 합니다.input 각진 는 당이각말하장는식는이라는 .hero가져가겠습니다Hero'하고 이 'HeroDetailComponent'를 할 수 .Hero하위 구성 요소에 대한 개체입니다.이를 입력 바인딩이라고 합니다.

@input의 전체 개념은 여기 답변 섹션에서 논의되었지만 나는 의심이 거의 없었기 때문에 그것들과 답변도 추가했습니다.

@input은 무엇에 사용됩니까?
@input은 상위 구성 요소에서 하위 구성 요소로의 통신에 사용되는 장식자입니다.

부모와 자식 구성 요소는 무엇입니까?

<component1-selector>
    <componenent2-selector>
    </component2-selector>
</componenent1-selector>

부모-구성요소 =>구성요소 1은 자식-구성요소 =>구성요소 2의 컨텍스트 역할을 합니다.

구성 요소 2가 구성 요소 1의 컨텍스트 내에 있으므로 구성 요소 1은 상위 항목이고 구성 요소 2는 구성 요소 1의 하위 항목입니다.

@input의 필요성?
기본적으로 필요합니다. 구성 요소 외부의 구성 요소 속성에 액세스할 수 없습니다.

자식 구성 요소가 부모 내에 있는 경우 부모가 모든 속성에 액세스할 수 없는 이유는 무엇입니까?

모든 속성을 바인딩할 수 있도록 만드는 것은 좋은 생각이 아니며, 이것은 개발자가 @input decorator만 봐도 통신에 사용하는 속성을 추적하는 데 도움이 되기 때문입니다.

구문과 그 설명을 위해 이 각진 문서 링크를 읽으십시오. 그들은 개념을 아름답게 설명했습니다.

입력 장식기란 무엇입니까?

입력 장식기는 사용자 지정 속성을 만드는 데 사용되며, 다른 구성 요소에 사용할 수 있는 속성을 만듭니다.

각진 입력 장식기를 사용하고 이를 사용하면 상위 구성 요소에서 하위 구성 요소로 데이터를 전달할 수 있습니다."

입력 장식기 사용:

1단계: 아래 명령을 사용하여 새 프로젝트 만들기 각진 프로젝트 만들기, 이미 다음이 있는 경우 이 단계를 건너뜁니다.

ng new angularDemo

2단계: 구성요소 추가 이제 아래 명령을 사용하여 이름이 상위 및 하위 구성요소인 두 개의 새 구성요소를 추가합니다.

ng new g c parent 
ng new g c child

3단계: 상위 구성요소 추가 상위 구성요소 HTML을 렌더링하려면 아래와 같이 HTML 태그로 app.component.html 파일에 포함시켜야 합니다.

<div style="text-align:center">
    <h1>
        Welcome to {{ name }}!
    </h1>
    <hr>
    <app-parent></app-parent>
</div>

4단계: 상위 및 하위 구성요소용 HTML 이제 상위 구성요소에서 가격을 변경해야 하고 하위 구성요소에 영향을 주어야 하는 시나리오가 있다고 가정합니다. 따라서 이에 대해 아래와 같이 HTML을 수행합니다.

상위 구성 요소의 HTML:

<h1>
  Parent component
</h1>

<input type="text"/>

<app-child></app-child>

하위 구성 요소의 HTML:

<h1>
  Child component
</h1>
<h4>
  Current Price : {{newPrice}}
</h4>

상위 HTML 코드에서 하위 구성 요소로 사용할 태그를 추가했습니다.

5단계: 입력 장식기를 사용하여 데이터 전달 지금 자식 구성 요소가 부모 구성 요소로부터 값을 받을 수 있도록 하려면 child.component.ts에서 다음과 같이 입력 장식기를 사용해야 합니다. 아래 코드를 참조하십시오.

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  @Input() public newPrice: string = '500';

  ngOnInit() {
  }

}

6단계: 하위 구성요소 값에 대한 참조 다음에는 하위 구성요소 값을 참조해야 하므로 아래와 같이 parent.component.ts에서 HTML을 다음과 같이 업데이트합니다.

<input type="text" #price (keyup)="onchange(price.value)"/>

<app-child [newPrice]="currentPrice"></app-child>

이제 ng serve 명령을 사용하여 응용 프로그램을 실행합니다.

여기에서 더 읽어 보십시오, https://www.tutscoder.com/post/input-decorator-angular

언급URL : https://stackoverflow.com/questions/45749533/what-is-input-used-for-in-angular