Angular 9 시리즈(2) 동적 성분 전송 매개변수

작은 쓰레기 같은 놈들 · 게시됨 2020. 6. 2. 오후 2:57:07

이전 섹션 리뷰

Angular 9 시리즈 (1) 동적 부하 구성 요소
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 시리즈(2) 동적 성분 전송 매개변수
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 시리즈(3)는 동적 컴포넌트 이벤트를 구독합니다
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 시리즈 (IV) 맞춤형 파이프 파이프라인
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 시리즈(V)는 금액 통화 형식을 제공합니다
https://www.itsvse.com/thread-9249-1-1.html

이 글에서는 동적으로 생성된 컴포넌트에 매개변수를 전달하는 방법을 설명합니다.

Modal1Component와 Modal2Component 컴포넌트는 메인 인터페이스에서 동적으로 생성하는 컴포넌트이며, 두 컴포넌트가 동일한 입력 매개변수(예: 이름)를 가지면 인터페이스를 정의할 수 있습니다.

angular-CLI 명령어를 통해 인터페이스를 생성하세요.

ng g interface IModalParameter

코드는 다음과 같습니다:

로그인이 보이네요.

IModalParameter 인터페이스에서 Modal1Component와 Modal2Component 컴포넌트를 상속받습니다.

로그인이 보이네요.

만약 우리 컴포넌트가 @Input() 이름: string; 속성, 컴포넌트는 오류를 보고하고, 인터페이스는 제약 조건 역할을 합니다.

동시에 index.component.ts 파일을 편집하고 onClick 메서드를 수정하며, 코드는 다음과 같습니다:

로그인이 보이네요.

(끝)

[각] Angular 9 시리즈(2) 동적 성분 전송 매개변수

관련 게시물

본 섹션