가끔 Angular가 다른 프레임워크와 같은 기능 구성을 갖기를 원하십니까?



안타깝게도 Angular는 클래스와 결합되어 있습니다. 그리고 사각형 못 함수를 둥근 구멍 클래스에 맞추려는 많은 시도에도 불구하고 실제로는 제대로 작동하지 않습니다. Angular는 이유가 있어서 하는 일을 하고 우리는 Angular를 그렇지 않은 것으로 만들려고 해서는 안 됩니다.

그러나 어쨌든 그것을 원하고 단 한 줄의 코드로 그것을 가능하게 하는 방법을 우연히 발견한다면 어떨까요?

<p>Count: {{ counter.value }}</p>

@Auto()
@Component()
class MyComponent {
  // nothing unusual?
  counter = new Counter()

  ngOnInit() {
    console.log("so far so good")
  }
}

@Auto()
class Counter {
  value = 0
  interval

  increment(ctx) {
    ctx.value++
  }

  ngOnInit() {
    console.log("wait what?")
    this.interval = setInterval(this.increment, 1000, this)
  }

  ngOnDestroy() {
    console.log("this shouldn't be possible")
    clearInterval(this.interval)
  }
}

기능 구성의 주요 기능 중 하나는 수명 주기 후크를 추출하여 많은 구성 요소에서 재사용할 수 있는 단일 논리 단위로 함께 배치하는 기능입니다. Angular에서 이 논리 단위는 일반적으로 Injectable로 장식된 서비스로 표현됩니다.

그러나 서비스에는 기능 구성에 비해 몇 가지 단점이 있습니다.

서비스가 생성될 때 구성 요소에서 서비스로 매개 변수를 전달할 수 없음

누출 서비스. 트리 아래에 있는 일부 코드는 의도하지 않은 방식으로 이를 주입하고 사용할 수 있습니다.

공급자 배열에 추가해야 하는 추가 절차입니다.

구성 요소에 제공되지 않으면 보기를 업데이트할 수 없음

올바르게 제공되지 않았거나 생략하여 상위 인스턴스를 실수로 삽입했습니다@Self.

디렉티브의 수명 주기에 액세스할 수 없습니다.

Angular는 장식된 클래스의 수명 주기 후크만 지원하지만 위의 예에는 수명 주기 후크가 있는 임의Counter 개체가 있습니다. 어떻게 작동합니까? 왜 지금?

각도 14

최근 기사에서 inject가 구성 요소를 포함하여 모든 Angular 장식 클래스에 대한 공개 API가 된 방법을 설명합니다. 이것은 의존성을 인스턴스화하는 유일한 수단인 생성자로부터 우리를 해방시켜 전혀 해킹 없이 다음을 가능하게 합니다.

@Component()
class MyComponent {
  resource = new Resource()
}

class Resource() {
  http = inject(HttpClient) // now works in Angular 14!
}

종속성을 주입하는 기능은 컴포지션 퍼즐의 또 다른 핵심 요소입니다. 구성 요소 수명 주기에 연결하는 방법이 필요합니다.

자동 합성

mmuscat / 각도 자동

Angular용 자동 데코레이터

Angular용 자동 데코레이터

@Auto()
@Component({
   template: `{{ count }}`,
   changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent {
   @Input()
   count = 0;

   object = new Resource()

   @Subscribe()
   autoIncrement = interval(1000).pipe(
      tap((value) => this.count = value + 1)
   );

   @Unsubscribe()
   subscription = new Subscription();

   ngOnInit() {
      console.log("I am called!")
   }
}

@Auto()
export class Resource {
   private http = inject(HttpClient)
   @Check()
   value

   ngOnInit() {
      console.log("I am also called!")
   }

   fetch(params) {
      this.http.get(endpoint, params)
         .subscribe(

…


View on GitHub


한 줄의 코드로 구성 요소, 지시문, 서비스 등에 Auto를 추가하기만 하면 다른 Auto 장식 개체와 즉시 구성됩니다.

배후에서 이 데코레이터는 수명 주기 후크를 클래스 필드 이니셜라이저 또는 생성자 내부에 생성된 모든 객체Auto에 계단식으로 배열합니다. 구성 요소 수명 주기가 서비스로 누출되지 않도록 보호되며 그 반대도 마찬가지입니다.

사용해 보세요!



하지만 문제가 있습니다

지금은 mutating some private Angular APIs 에 의해서만 가능합니다. 따라서 프로덕션에서 시도해야 하는 것은 절대 아닙니다 🙇

각도 친화?

다른 프레임워크에서 useXXX를 보고 움찔한다면 Angular에서 이것을 옹호하는 것이 아니므로 안심하십시오.

Angular에서는 new XXX를 사용합니다.

행복한 코딩!