서비스로서의 지침

Angular State Library의 고유한 기능 중 하나는 모든 상점이 @Directive라는 것입니다.

Disclaimer: This project is an experiment, it is not production ready.

서비스와 달리 지시문은 입력, 출력, 호스트 바인딩/리스너, 수명 주기 후크, 템플릿 및 쿼리에 액세스할 수 있습니다. 지시문도 열심히 인스턴스화되는 반면 서비스는 다른 무언가가 주입할 때까지 휴면 상태를 유지합니다. 지시문은 DOM을 완전히 제어합니다.

디렉티브를 서비스로 사용하는 것은 새로운 개념이 아닙니다. 인젝터 트리의 다른 구성 요소에서 지시문과 구성 요소를 주입하는 것이 일반적입니다. 그러나 우리는 항상 디렉티브를 서비스로 생각하지 않거나 서비스가 디렉티브와 같기를 원할 수도 있습니다.

@Store()
@Component()
export class UIButton {
  @Input() disabled = false

  @Action()
  @HostListener("click")
  animateClick() {
    const { nativeElement } = inject(ElementRef)
    if (!this.disabled) {
      return dispatch(animateRipple(nativeElement), {
        complete() {
          console.log("animation done")
        }
      })
    }
  }
}

function animateRipple(element) {
  // use your imagination
}

당신의 redux 스토어는 이것을 할 수 있습니까?

Angular State Library에서 a@Store는 지시어이자 서비스입니다. 지시문을 사용하면 상태 관리와 함께 제공되는 대부분의 상용구를 제거할 수 있습니다.

상황별 저장소

지시문에는 입력이 있으므로 상점을 구성 가능하게 만들 수 있습니다. 그런 다음 하위 분류 없이 저장소를 다른 방식으로 재사용할 수 있습니다. 이것은 가치 제공자처럼 단순한 것일 수 있습니다.

export const Theme = new ValueToken<UITheme>("Theme")

@Store()
@Directive({
  standalone: true,
  selector: "[theme]",
  providers: [Theme.Provide(UITheme)]
})
export class UITheme {
  @Input() theme = {
    color: "red"
  }
}

그런 다음 상위 구성 요소에서 테마 공급자를 구성할 수 있습니다.

<section [theme]="blueTheme">
  <ui-button>Blue button</ui-button>
</section>
<section [theme]="greenTheme">
  <ui-button>Green button</ui-button>
</section>

@Component({
  standalone: true,
  imports: [UITheme],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UIApp {
  blueTheme = {
    color: "blue"
  }
  greenTheme = {
    color: "green"
  }
}

그리고 하위 구성 요소에서 소비됩니다.

<div [style.color]="theme.color">
  <ng-content></ng-content>
</div>

@Component({
  standalone: true,
  providers: [Theme],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UIButton {
  theme = inject(Theme)
}

이제 애플리케이션의 어느 곳에서나 구성할 수 있는 구성 가능하고 반응적인 저장소가 있습니다. 축하합니다. 방금 React 컨텍스트 API를 발명했습니다.

호스트 지시문

호스트 지시문은 서비스로서의 지시문에 대한 완벽한 사용 사례입니다. Angular 15(보류 중)에서는 템플릿에 지시문을 추가하지 않고도 호스트 구성 요소에 지시문을 추가할 수 있습니다. 즉, 루트 저장소를 루트@Component 또는 현재로서는 불가능한 Angular 요소에 직접 연결할 수 있습니다.

@Component({
  standalone: true,
  selector: "ui-root",
  hostDirectives: [
    AuthStore, 
    ProfileStore, 
    NotificationStore
  ]
})
export class UIRoot {}

최종 솔루션이 출시되면 어떤 모습일지 기다려야 하지만 지금은 구성 요소 템플릿에 호스트 지시문을 첨부하여 이 문제를 해결할 수 있습니다.

<ng-container authStore profileStore notificationStore>
  <router-outlet></router-outlet>
</ng-container>

지금은 충분하다

서비스 대신 디렉티브를 사용해야 하는 경우

이것은 의견일 뿐이지만 다음과 같은 경우 디렉티브를 서비스로 사용할 수 있습니다.

서비스는 상태 저장입니다.

디렉티브는 장기 구독을 적절하게 관리하고, 입력 변경에 반응하고, 변경 감지를 실행하는 수명 주기 후크의 이점이 있습니다. 또한 템플릿에서 작성하는 것이 훨씬 쉽습니다.

서비스는 DOM 요소 또는 DOM 이벤트에 따라 다릅니다.

호스트 요소가 지시문에 제공되는 경우 서비스가 호스트 요소에 액세스할 수 있지만 지시문은 @Content 및 @View 쿼리도 사용할 수 있습니다. 또한 작업을 더 쉽게 하기 위해 @HostListener 및 @HostBinding에 액세스할 수 있습니다.

주입하기 전에 서비스를 초기화해야 합니다.

지시문은 응용 프로그램 범위 대신 구성 요소 범위에서 작동한다는 점을 제외하면 ENVIRONMENT_INITIALIZER 와 같습니다. 지시는 항상 간절합니다.


Angular State Library는 모든 면에서 그렇습니다. 또한 오늘 자신의 디렉티브를 서비스로 사용할 수 있습니다.

도움 필요

이 프로젝트는 현재 개념 증명입니다. 거의 생산 준비가 된 곳이 아닙니다. 기여 또는 dogfooding에 관심이 있으시면 언제든지 open a line on Github discussions 로 연락하거나 아래에 의견을 남겨주십시오.

읽어 주셔서 감사합니다!