⚠️ This article is based on an early version of the library. Click here for the most recent version.

Angular Composition API은 기능적인 Angular 응용 프로그램을 작성하기 위한 경량(3kb) 실험용 라이브러리입니다.

function State(props: Props) {
  Subscribe(() => {
    console.log("Hello World!")
  })
}

개념

이 라이브러리는 Angular 구성 요소를 연결하고 조정하는 데 필요한 많은 의식을 제거하는 실행 컨텍스트를 도입합니다. 수명 주기 후크, 변경 감지, 쿼리, 호스트 바인딩 및 호스트 수신기와 같은 기존 Angular 구조 위에 추상화 계층을 제공합니다. 구성 가능한 구독으로 RxJS의 기능을 수용합니다. Angular Composition API는 Angular 개발자에게 기본적으로 느껴지도록 설계되었습니다.
View 및 Service 의 두 가지 핵심 API가 있습니다.

보다

View API는 Angular 구성 요소 또는 지시문을 확장하는 혼합입니다. State 팩토리 함수와 선택적 Props 인수를 사용합니다. 이 함수는 다른 컨텍스트 종속 API를 호출할 수 있는 실행 컨텍스트에서 실행됩니다.

서비스

Service API는 팩토리 함수에서 트리 쉐이킹이 가능한 서비스를 생성하는 믹스인입니다. 이 함수는 다른 컨텍스트 종속 API를 호출할 수 있는 실행 컨텍스트에서 실행됩니다.

정의

이 라이브러리가 Value 를 참조하면 BehaviorSubject 를 의미하고 Emitter 를 참조하면 EventEmitter 를 의미합니다.

예시

이 라이브러리를 사용하여 애플리케이션을 개발하는 방법에 대한 아이디어를 제공하기 위해 서비스에서 일부 할 일을 표시하는 구성 요소를 작성해 보겠습니다.

먼저 props 인터페이스를 정의합니다. 구성 요소는 해당 메타데이터를 상속합니다.

@Directive()
class Props {
  @Input() userId: string
}

다음으로 상태 함수를 정의합니다. 소품을 받고 todos가 포함된 객체를 반환합니다Value.

function State(props: Props) {
  const userId = DoCheck(() => props.userId) // <1>
  const [todos, loadTodosByUserId] = Inject(LoadTodosByUserId) // <2>

  Subscribe(userId, loadTodosByUserId) // <3>

  return {
    todos // <4>
  }
}

관찰해야 할 몇 가지 사항:

userId 소품이 변경될 때 업데이트되는 userId 값을 생성합니다.

Inject LoadTodosByUserId 토큰은 Value 및 Emitter 를 포함하는 배열을 반환합니다.

새 항목userId을 내보낼 때마다 todos가 로드되도록 설정했습니다.

우리는 todos Value 를 반환하며 템플릿에서 자동으로 등록됩니다. 반환된 항목Value이 변경될 때마다 변경 감지가 예약됩니다.

@Component({
  selector: "todo-list",
  template: `
    <todo *ngFor="let todo of todos"></todo>
  `
})
export class TodoList extends View(Props, State) {}

마지막으로 Props와 State를 View 믹스인이 있는 구성 요소에 연결합니다.

서비스

LoadTodosByUserId는 어떻습니까? 이것은 Service 를 사용하여 구현됩니다. 아래 예는 설명 없이 제공됩니다.

function loadTodosByUserId() {
    const http = Inject(HttpClient)
    const emitter = Emitter()
    const value = Value()

    Subscribe(emitter, (userId) => {
        const source = http.get(`//example.com/api/v1/todo?userId=${userId}`)
        Subscribe(source, set(value))
    })

    return [value, emitter]
}

export const LoadTodosByUserId = Service(loadTodosByUserId, {
    providedIn: "root"
})

구독하다

효과는 Subscribe 를 사용하여 수행됩니다. 관찰자에서 분해 논리를 반환할 수 있다는 점을 제외하면 RxJS 의 subscribe 메서드와 유사합니다. 해제 논리는 관찰자가 새 값을 받거나 컨텍스트가 소멸될 때마다 실행됩니다. 뷰가 마운트될 때 한 번 호출되는 관찰자만으로 호출할 수도 있습니다.

function State(props: Props) {
  Subscribe(() => {
    console.log("Hello World! I am only called once")
    return () => console.log("Goodbye World!")
  })
}

Subscribe는 View 및 Service 컨텍스트 모두에서 사용할 수 있습니다.

전주곡

아마도 NgModule 및 NgZone 옵트아웃이 Angular roadmap 에서 도착하면 보다 인체 공학적이고 기능적이며 형식이 안전한 구성 요소 API에 액세스할 수 있습니다. Angular Composition API는 그 방향으로 나아가는 단계입니다.

그게 다야! 읽어 주셔서 감사합니다.

mmuscat / 각도 구성 API

기능적 반응 Angular 애플리케이션을 위한 구성 모델.