Angular 동적 형태 예시 설명

이 글에서는 주로 각도 동적 형태의 구현 아이디어를 소개합니다. 구체적인 구현 세부 사항은 커뮤니티에서 semlinker의 동적 양식 생성에 대한 기사와 그가 권장하는 참조 리소스인 동적 구성 요소를 사용하여 Configurable Reactive Forms in Angular를 참조하세요. 저자의 이 기사는 주로 부분 번역입니다. 그리고 위 글에 대한 반성.

동적 양식 사용 시나리오

때때로 유연한 양식이 필요합니다. 이 양식은 사용자의 선택이나 서버에서 반환된 정보에 따라 재구성될 수 있습니다. 예를 들어 입력 요소 집합을 추가하거나 삭제합니다. a 그룹 선택 요소 등

이 경우 처음부터 템플릿에 모든 양식을 작성하고 선택 제어를 위해 ngif 트리 구조를 사용하면 프로그램이 더 중복됩니다.

이때. 사용자의 선택(구성에 따라) 또는 서버의 응답을 기반으로 프로그램이 필수 양식을 자동으로 생성하는 것이 가장 좋습니다. 다이나믹한 형태가 다루는 사업입니다.

---

컴포넌트 생성 관련 개념

• 컴포넌트의 두 가지 컴포넌트

양식을 동적으로 생성하려면 먼저 컴포넌트가 생성되는 방식을 이해해야 합니다.

Angular 구성 요소는 두 부분으로 구성됩니다.

1. Wrapper

Wrapper는 구성 요소와 상호 작용할 수 있습니다. 래퍼가 초기화되면 구성 요소가 인스턴스화됩니다. 동시에 구성 요소 변경 감지 및 ngOnInit 및 ngOnChanges와 같은 후크 기능 트리거도 담당합니다.

1. View

View는 렌더링된 템플릿을 렌더링하고 구성 요소의 모양을 표시하며 래퍼의 변경 감지를 트리거할 수 있습니다. 컴포넌트는 여러 개의 뷰를 가질 수 있으며, 각 뷰는 Angular에서 제공하는 두 가지 함수를 호출하여 자체적으로 생성 및 소멸될 수 있습니다. 이 프로세스에는 최상위 뷰의 참여가 필요하지 않습니다.

• 컴포넌트의 일반적인 로딩 방식(비동적 로딩 방식)

일반적으로 컴포넌트를 루트 컴포넌트나 다른 컴포넌트에 임베드합니다. 포함된 구성 요소를 하위 구성 요소라고 하며 포함된 구성 요소를 상위 구성 요소라고 합니다. 이때 하위 컴포넌트 코드가 컴파일되면 컴포넌트 팩토리 컴포넌트 팩토리(Angular 코어 클래스 ComponentFactory의 인스턴스)와 hsot 뷰가 생성됩니다. 호스트 뷰가 배치를 담당합니다. 상위 구성 요소에 있는 이 구성 요소의 보기에서 구성 요소를 생성하는 DOM 노드와 구성 요소를 생성하는 래퍼 및 보기입니다.

• 구성 요소의 동적 로딩

그리고 동적 구성 요소를 구성 요소 뷰에 삽입하려고 할 때 동적 구성 요소의 인스턴스를 가져올 수 없습니다. 이는 비동적 구성 요소 컴파일러가 수행하는 작업이기 때문입니다.

---

동적 구성 요소 구현

angular는 위의 문제를 해결하기 위한 몇 가지 기능을 제공합니다. 이러한 기능을 사용하려면 두 개의 개체를 주입해야 합니다.

constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private viewcontainerRef: ViewContainerRef,
  ) {
      
  }

ComponentFactoryResolver 및 ViewContainerRef를 삽입했습니다.

ComponentFactoryResolver는 컴포넌트 클래스를 매개변수로 전달받아 앞서 언급한 컴포넌트 팩토리인 컴포넌트 클래스를 기반으로 컴포넌트 팩토리를 생성하는 메서드(resolveComponentFactory())를 제공합니다.

ViewContainerRef는 이 뷰에서 하위 구성 요소를 생성하기 위해 구성 요소 팩토리를 매개 변수로 받는 메서드(createComponent())를 제공합니다. (개인적으로는 호스트 뷰가 수행하는 작업을 처리하고 구성 요소에 대한 래퍼 및 뷰를 생성한다는 것입니다.)

---

동적 양식 구현

위에서는 동적 구성 요소를 구현하는 몇 가지 기술을 간략하게 소개했습니다. 이제 이를 수행하는 방법에 대해 생각해 보겠습니다. . 동적 형태.

• 구체적인 아이디어

독립적인 동적 폼 모듈을 만들고 싶습니다. 동적 폼을 사용하려면 이 모듈을 도입하고 약간의 구성만 적용하면 됩니다.

이 모듈이 완료된 후 최상위 사용자 관점의 작업 흐름이 다음과 같기를 바랍니다.

입력 속성이 있는 구성 요소를 쉽게 만들 수 있다는 것이 문제의 핵심입니다. 입력 속성을 기반으로 원하는 양식을 생성하는 방법입니다.

즉, ComponentFactoryResolver 및 ViewContainerRef를 호출하여 구성 요소를 동적으로 생성해야 하는지, 아니면 다른 사람이 처리해야 하는지를 의미합니다.

다음 그림은 구현 아이디어입니다.

1. 실제로는 동적 형식을 작은 동적 구성 요소(미리 로드되지 않음)로 분할하고 외부 구성 요소는 컨테이너 역할을 합니다. 내부에서 생성되고 파괴되며 함께 역동적인 형태를 형성합니다.

2. 调用ComponentFactoryResolver和ViewContainerRef生成组件的的这部分逻辑没有集成在外层容器中，而是交给了一个自定义的指令和ng-container。因为指令没有视图，他通过注入ViewContainerRef获取到的是宿主的视图容器。由于ng-container不会被渲染，所以获取到的视图容器就是外层组件容器的视图容器。

这么处理的好处就是不需要由外层组件统一对各个拆分的动态组件进行管理，相当于是由动态组件自己进行管理。

外层组件容器大概会是下面这样：

    

configs是用户的配置数据，自定义指令寄宿在ng-container中，根据config渲染出各自的动态组件，而ng-container是透明的。

看一下代码目录结构，最后会是这个样子

以上就是大体的实现思路了，具体还有许多细节可以关注文章开头提到的那两篇文章，讲的很详细。

相关推荐：

php 动态表单的生成和提交解决方案

动态表单（一）动态表单的定义

jQuery实现动态表单验证时文本框抖动效果完整实例_jquery

위 내용은 Angular 동적 형태 예시 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!