각도 2 : "글로벌"라이프 사이클 후크?

Question

TL; DR

우리는 각도 2 응용 프로그램을 구축하고, "글로벌"ngOnInit 및 ngOnDestroy 기능을 등록하려고합니다. "글로벌"이라는 말은 함수가 모든 컴포넌트에 대해 명시 적으로 구현 될 필요없이 모든 컴포넌트에 대해 실행된다는 의미입니다. 이것이 가능한가?

은 자세한 우리의 구성 요소

일부 (전부는 아니지만) 그들이 (예를 들어, ngOnDestroy)를 언로드되면, 그들은 (예를 들어, ngOnInit)로드되면 글로벌 서비스에서 뭔가를 등록하고 다시 등록을 취소해야합니다.

• 이 (ngOnInit 및 ngOnDestroy에) 그렇게해야하는 모든 구성 요소에서이 논리를 구현 : 여기에 내가 생각할 수있는 두 가지 방법이 있습니다.
• 등록/등록 해제가 필요한 하위 클래스로 구현 된 추상 메소드를 호출하는 기본 클래스에서이 논리를 구현합니다.

두 가지 접근법은 정말 만족하지 : 첫 번째에서

• 내가 또 다시 전체 로직을 구현해야합니다. 예, 알아요, 보일러 판을 도우미 수업에 넣을 수 있어요. 그러나 이것은 약간 암묵적으로 보이며, 일정한 각도의 라이프 사이클에서 "숨겨져 있습니다". 말하기 이름 (예 : 인터페이스/기본 클래스)을 갖는 것이 더 명확하게 보입니다.
• 둘째로 모든 클래스는 동일한 공통 기본 클래스를 확장해야합니다. 하지만 다른 기본 클래스 (다중 상속)를 확장해야한다면 어떻게 될까요?

  이 왜 필요한 모든 구성 요소에 의해 구현 될 수있는 인터페이스로 위에서 언급 한 추상 클래스를 대체하지 : 나는 다음과 같은 아이디어를 내놓았다 왜

. 그런 다음 가능한 모든 요소 (예 : 모듈, 라우팅 등)의 모든 ngOnInit 및 ngOnDestroy에서 실행되는 전역 함수를 등록합니다. 함수에서 구성 요소가 인터페이스를 구현하고 있는지 확인한 다음 적절한 함수를 호출하여 유형 특정 물건을 등록하십시오. 2 각도 수

내 질문에

• 이렇게? 나는. "글로벌 라이프 사이클 후크"(또는 그와 비슷한 것)를 등록 할 수 있습니까?
• 아니면 완전히 잘못된 접근 방식입니까?
• 다른/더 좋은 아이디어가 있습니까?

Answer 1

전체 앱에 대한 동작을 강제로 설정하는 것은 좋지 않을 수 있습니다. 이는 타사 구성 요소와 우선 순위에 영향을 미칩니다.

상용구 코드는 구체적인 기본 클래스로 이동할 수 있습니다. JS/TS 다중 상속을위한 솔루션이 있습니다. @mixin, TypeScript guide도 참조하십시오.기본 클래스의 메소드가 고정되어 있기 때문에

클래스 믹스 인은 간략화 장식과 같이 표현 될 수있다 :

class CustomLifecycle implements OnInit, OnDestroy { 
    constructor(
    public originalNgOnInit: Function, 
    public originalNgOnDestroy: Function 
) {} 

    ngOnInit() { 
    ... 
    if (typeof this.originalNgOnInit === 'function') { 
     this.originalNgOnInit(); 
    } 
    } 

    ngOnDestroy() { 
    ... 
    if (typeof this.originalNgOnDestroy === 'function') { 
     this.originalNgOnDestroy(); 
    } 
    } 
} 

function Lifecycled() { 
    return function (target: Function) { 
    const customLifecycle = new CustomLifecycle(
     target.prototype.ngOnInit, 
     target.prototype.ngOnDestroy 
    ); 

    target.prototype.ngOnInit = customLifecycle.ngOnInit; 
    target.prototype.ngOnDestroy = customLifecycle.ngOnDestroy; 
    } 
} 

그리고 그것은 구현 ngOnInit 제한된다

@Component({ ... }) 
@Lifecycled() 
class SomeComponent { .... } 

등과 같이 사용될 수있다 프로토 타입 메소드에서 화살표 멤버는 생성자를 패치해야합니다.