여러 구성 요소/경로가있는 ngOnInit에서 서비스 메서드를 호출하는 방법

Question

몇 가지 경로가 정적 페이지 이상입니다.
각 50 개 이상의 경로에서 경로가 시작될 때 두 가지 다른 서비스에서 두 가지 방법 (및 그 이상)을 호출해야합니다.
간단한 해결책은 각 페이지에서 ngOnInit 메서드를 호출하고 앞서 언급 한 메서드를 호출하는 것입니다.
문제는 동일한 코드를 50 개의 다른 파일에 복사하여 붙여 넣는 것을 의미합니다. 복사 및 붙여 넣기가 좋지 않습니다. 유지 관리 할 수 ​​없습니다.

내가 페이지 "자주 묻는 질문"(수동으로 할당 된 ID : 52)가 있습니다 및 페이지 "에서 우리를 찾는다"(수동으로 할당 된 ID : 13)

는 예를 확인하십시오. 이들은 2 개의 다른 경로입니다.
관리자 패널에서 해당 페이지를 편집하는 데 사용되는 "편집자"서비스가 있으며보고있는 페이지를 추적해야합니다.
"Cache"라는 서비스가 있는데, 그 전에 페이지가 이미 백엔드에 쿼리되었거나 서버에서 가져와야하는지 확인합니다.
이 서비스는이 경로에 수동으로 할당 한 ID를 알고 싶어합니다.
이 특정 사례의 ID는 데이터베이스/API를 쿼리하는 데 사용되지만이 세부 정보는 질문 중심이 아니며 비슷한 문제가있는 다른 사용자의 대답을 무효로해서는 안됩니다.

// Page FAQ 
id: number 
constructor() { 
    this.id = 52; // 52 is the id that I assigned to the page FAQ 
} 
ngOnInit() { 
    editorService.keepTrack(this.id); 
    editorService.moreMethod().notMaintainable().whatIfIChangeSomething(this.id/0); 
    cacheService.keepTrack(this.id); 
} 

// Page Find Us 
id: number 
constructor() { 
    this.id = 13; // 13 is the id that I assigned to the page Find Us 
} 
ngOnInit() { 
    editorService.keepTrack(this.id); 
    editorService.moreMethod().notMaintainable().whatIfIChangeSomething(this.id/0); 
    cacheService.keepTrack(this.id); 
} 

자,이 내가 손에 문제에 관련되지 않은 세부 질문을 과부하 할 필요성을하지 않는 간단한 예입니다.

제가 생각할 수있는 유일한 해결책은 세 번째 서비스를 만드는 것입니다. 그러면 다른 두 메소드가 호출됩니다.
그래서 모든 페이지에서 ngOnInit에서이 단일 서비스 메소드를 호출하고 다른 두 개를이 세 번째 서비스에 호출하는 방법을 구현해야합니다.
이렇게하면 복사 및 붙여 넣기가 최소화되고 구현을 단일 manteinable 파일로 남겨 둡니다.

// Page FAQ v2 
id: number 
constructor() { 
    this.id = 52; 
} 
ngOnInit() { 
    inceptionService.doStuff(this.id); 
} 

// Page Find Us v2 
id: number 
constructor() { 
    this.id = 13; 
} 
ngOnInit() { 
    inceptionService.doStuff(this.id); 
} 

// InceptionService 
export class InceptionService { 
    doStuff(data) { 
    editorService.keepTrack(data); 
    editorService.moreMethod().notMaintainable().whatIfIChangeSomething(data/0); 
    cacheService.keepTrack(data); 
    } 
} 

질문은 다음과 같습니다 :
이 할 수있는 더 좋은 방법이 있나요

는 예를 만들려면? 나는 최선의 접근 방식을 사용하지 않고 있다고 생각합니다.
나는 아직도 서비스를 남용하고있는 것처럼 느낍니다.

Answer 1

마이클 Dymel의 대안이 유효하고 내 "InceptionService"보다 더 나은 접근 방식으로 내 모든 요구를 충족 것입니다,하지만 난 그의 대답이었다 비록 귄터 Zöchbauer의 대답은, 더 나은, 더 유지 보수가 더 각도 접근 방식을 사용한다고 생각 불완전한.
Günter Zöchbauer 대답은 또한 Alex Rickabaugh @alxhub가 마무리하는 데 도움이되는 다른 솔루션을 찾을 수있는 의견을주었습니다.

여기에서는 angular-cli 구조를 나타냅니다. app.component.html에

교체
<router-outlet>
와 app.component.ts에
<router-outlet (activate)="newComponentActivated($event)">

은 "편집 서비스"

updateCurrentPage(component) { 
    console.log(component); 
} 

에서

newComponentActivated(component) { 
    // Updating tracked page ID 
    this.editorService.updateCurrentPage(component); 
} 

지금 이브 경로가 변경되면 이벤트는 인수와 메소드를 포함하여 구성 요소 복사본으로 편집기 서비스에 알립니다.
이것은 라우트 된 구성 요소에서 어떤 것도 확장하거나 구현할 필요가 없다는 것을 의미합니다.

Answer 2

경로 이벤트에 가입하고 거기에서 메소드를 호출 할 수 있습니다. (How to detect a route change in Angular 2? 참조)

이것은 서비스 내에서 작동합니다.

Answer 3

이러한 경로에 대한 기본 클래스를 만들고이 기본 클래스에서 구성 요소를 상속받을 수 있습니다.

export class BaseComponent { 
    ngOnInit() { 
     //your service calls 
    } 
} 

export class MyStaticComponent1 extends BaseComponent { 
    ngOnInit() { 
     super.ngOnInit(); 
     //component specific calls 
    } 
}