Angular에서 동적으로 생성된 구성 요소를 사용하는 경우 필요할 때 상위 구성 요소와 하위 구성 요소 간에 정보를 전달하는 것이 어려울 수 있습니다. 상위 구성 요소에 정보를 제공한 다음 하위 구성 요소 내에 삽입해야 합니다. 반드시 어려운 것은 아니지만 추가 상용구 코드가 많이 발생합니다.  우리가 예전처럼   데코레이터를 사용할 수 있다면 훨씬 더 좋을 것입니다. 글쎄요? Angular는 버전 16부터 정확히 이와 같은 작업을 지원합니다. 이번 포스팅에서는 그 방법을 알려드리겠습니다. 좋아, 시작해 보자. @Input   https://youtu.be/MT2JP8pn1qU?embedable=true  Angular Injector를 사용하여 기존 방식으로 데이터 전달  먼저, 부모로부터 동적으로 생성된 구성 요소에 데이터를 전달하는 데 사용한 방법을 살펴보겠습니다. 이 예에서는 구성 요소 템플릿 내에   있으며 이를 플레이어 구성 요소에 전달합니다. *ngComponentOutlet  이 경우에는 사용자 정의 하위 인젝터도 전달하며 이전에 하위 구성 요소에 대한 데이터를 주입한 방법입니다.  main.ts   @Component({ selector: 'app-root', template: ` <ng-container *ngComponentOutlet="playerComponent; injector: childInjector"></ng-container> ` }) export class App { protected playerComponent = PlayerComponent; }  그리고 이 하위 인젝터를 생성하려면 템플릿 내에서 설정하고 사용할 수 있도록 속성을 생성해야 했습니다.   export class App { protected childInjector?: Injector; ... }  그런 다음 생성자 내의 각도 코어에서 인젝터를 주입해야 했습니다.   export class App { ... constructor(private injector: Injector) { } }  그 후에는 플레이어 토큰을 자식에게 제공하기 위해 create 메서드와 공급자의 배열을 사용하여 자식 인젝터를 설정해야 했습니다.   export class App { ... constructor(private injector: Injector) { this.childInjector = Injector.create({ providers: [ { provide: PlayerToken, useValue: this.player } ], parent: this.injector }); } }  마지막으로, 플레이어 구성 요소인 하위 구성 요소에서 각도 코어의 삽입 방법을 사용하여 플레이어 속성을 설정해야 했습니다.  player.comComponent.ts   export class PlayerComponent { protected player?: Player = inject(PlayerToken); }  따라서 이 모든 것은 단순한 플레이어 개체를 동적 구성 요소에 전달하는 것뿐입니다. 즉, 이것이 동적 구성 요소가 아닌 경우 간단히   으로 만들고 플레이어 데이터 개체를 상위 항목의   에 바인딩하면 됩니다. 하지만 이는 동적으로 생성된 구성요소이므로 이를 수행할 수 없습니다. 그렇죠? @Input @Input  글쎄, Angular 16부터는 실제로   을 대신 사용할 수 있으며 지금까지 본 것보다 훨씬 간단합니다. @Input    입력 개체를 사용하여 새로운 방식으로 데이터 전달 *ngComponentOutlet  대신 이 플레이어 속성을   으로 변경하는 것부터 시작합니다. 그리고 플레이어 인터페이스에 간단히 입력하면 됩니다. @Input  player.comComponent.ts   export class PlayerComponent { @Input() player?: Player; }  이제 주입 방법과 플레이어 토큰 가져오기가 더 이상 필요하지 않으므로 제거할 수 있습니다. 그런 다음 상위 템플릿의 템플릿에서 인젝터를 제거하고 대신 입력 개체로 바꿀 수 있습니다. 우리는 이 객체를 원하는 수의 입력에 전달할 수 있습니다. 따라서 5개의 입력이 있는 경우 이름을 포함하고 필요한 데이터를 각각 전달합니다.  하지만 이 경우에는 하위 구성 요소인 플레이어에 대한 입력이 하나만 있으므로 전달하기만 하면 됩니다.  main.ts   @Component({ selector: 'app-root', template: ` <ng-container *ngComponentOutlet="playerComponent; inputs: { player }"></ng-container> ` })  이제 어린이 주입기를 제거할 수 있습니다. 이는 생성자를 완전히 제거할 수도 있음을 의미합니다. 마지막으로 더 이상 사용하지 않으므로 앵귤러 코어 및 플레이어 토큰 가져오기에서 인젝터를 제거할 수 있습니다.   export class App { protected player: Player = { name: 'LeBron James', games: 1421, points: 38652, fieldGoalPercentage: 0.505, threePointPercentage: 0.345, imageName: 'lebron-james' }; protected playerComponent = PlayerComponent; }  그리고 그게 다야. 우리는 모든 것이 예전처럼 작동하는 것을 볼 수 있습니다. 따라서 실행하기가 훨씬 쉽고 코드도 적어 항상 좋습니다.  하지만 한 가지 아쉬운 점은   은 지원되지만   은 지원되지 않는다는 것입니다. 좀 당황스럽지만 그게 바로 그거예요. 이것이 매우 편리하기 때문에 향후 지원을 추가할 수 있기를 바라지만, 기다려 보아야 할 것입니다. @Input @Output  실제로 보고 싶으십니까?  아래 Stackblitz 예제에서 이러한 기술의 데모 코드와 예제를 확인하세요. 질문이나 의견이 있으시면 주저하지 말고 댓글을 남겨주세요.   https://stackblitz.com/edit/stackblitz-starters-9xzkkf?ctl=1&embed=1&file=src%2Fmain.ts&embedable=true

Buy Me a Coffee

이 오디오는 이야기의 원래 언어로 제작되었습니다!

Angular @Input을 사용하여 동적으로 생성된 구성 요소에 데이터를 전달하는 방법

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

Crypto Growth: 효과적인 사용자 페르소나 만들기

Claude Sonnet 3.5 시스템 프롬프트 유출: 법의학적 분석

HackerNoon 글쓰기 대회에서 우승하고 싶으신가요? #crypto-api 대회 우승자들이 추천하는 내용은 다음과 같습니다.

성공적인 클라우드 마이그레이션을 위한 전체 가이드: 전략 및 모범 사례

Crypto Growth: 효과적인 사용자 페르소나 만들기

Claude Sonnet 3.5 시스템 프롬프트 유출: 법의학적 분석

HackerNoon 글쓰기 대회에서 우승하고 싶으신가요? #crypto-api 대회 우승자들이 추천하는 내용은 다음과 같습니다.

성공적인 클라우드 마이그레이션을 위한 전체 가이드: 전략 및 모범 사례

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps