Ionic 2로 이동 한 페이지에서 주 구성 요소의 기능에 액세스하려면 어떻게해야합니까?

Question

다음 명령을 사용하여 Ionic v2 응용 프로그램을 만들었습니다.

ionic start my-app sidemenu --v2 --ts.

파일 내에서 app.ts 파일 안에는 사이드 메뉴가 표시되어야 할 상태를 유지하고 상태를 유지하는 것과 같은 몇 가지 작업을 수행 할 수있는 몇 가지 논리 (함수)가 있습니다. 특정 페이지 (예 : pages/getting-started/getting-started.ts)가 표시되면 app.ts에서 같은 기능을 다시 사용하고 싶습니다. 내비게이션 페이지에서 app.ts의 기능에 액세스하려면 어떻게해야합니까?

내 app.ts은 다음과 같습니다.

class MyApp { 
@ViewChild(Nav) nav:Nav; 
private rootPage:any = GettingStartedPage; 
private pages:any; 

constructor(platform:Platform) { 
    this.initializeApp(); 
    this.pages = { 
    'GettingStartedPage': GettingStartedPage, 
    'AnotherPage': AnotherPage //more pages and modals 
    }; 
} 

initializeApp() { 
    this.platform.ready().then(() => { 
    StatusBar.styleDefault(); 
    }); 
} 

openPage(page:string) { 
    //when a user clicks on the left menu items, a new page is navigated to 
    let component this.pages[page]; 
    this.nav.setRoot(component); 
} 

openModal(page:string) { 
    //modals are opened here, there's more complicated logic 
    //but this serves to demonstrate my problem 
    let component = this.pages[page]; 
    Modal.create(component); 
} 
} 

ionicBootstrap(MyApp); 

내 getting-started.ts은 다음과 같습니다.

export class GettingStartedPage { 
constructor(
    platform:Platform, 
    viewController:ViewController, 
    navController:NavController, 
    navParams:NavParams) { 
} 

buttonClicked() { 
    //i need to access app.ts openModal here 
    //how do i call a method on app.ts? 
    //like MyApp.openModal('SomeModal'); 
} 
} 

Answer 1

공유 서비스를 사용하면 전체 응용 프로그램에서 통신 할 수 있습니다.

@App({ 
    ... 
    providers: [SharedService] 
}) 

당신이 App 구성 요소와 통신 할 App 구성 요소와 구성 요소, 지침 또는 서비스에 주입하여 응용 프로그램에 제공

@Injectable() 
class SharedService { 
    // use any kind of observable to actively notify about new messages 
    someEvent:Subject = new Subject(); 
} 

같은 서비스 클래스 만들기 from

constructor(private sharedService:SharedService) {} 

someEventHandler() { 
    this.sharedService.someEvent.next('some new value'); 
} 

App 구성 요소 세부 사항은 구성 요소 간의 통신을 위해 Events를 사용할 수있는 이온 2와 https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

를 참조하십시오 통지

constructor(sharedService:SharedService) { 
    sharedService.someEvent.subscribe(event => { 
    if(event == ...) { 
     this.doSomething(); 
    } 
    }); 
} 

에 가입. 예를 들어, 함수 buttonClicked()에 당신은 이벤트

buttonClicked() { 
    this.events.publish('functionCall:buttonClicked', thisPage); 
} 

을 불 수 있고, 예를 들어 그것을 듣고 당신도 (: thisPage 여기) 이벤트와 데이터를 보낼 수

this.events.subscribe('functionCall:buttonClicked', userEventData => { 
    openModal(userEventData[0]); 
}); 

: 메인 클래스의 생성자에서 모달를 엽니 다.

Answer 3

또는, 당신도

Events

이벤트에 갈 수있는 것은하는 발행 - 구독 앱을 통해 응용 프로그램 수준 이벤트에 응답 보내고 에 대한 스타일의 이벤트 시스템을.

또는 EventEmitter

EventEmitter는 angular2 추상화와 구성 요소에서 이벤트를 방출하는 유일한 목적이다.

this.AppComponent.functionName(); 

: 해당 기능에 액세스하여 원하는 목적지 페이지 내 다음

import { MyApp } from '../../app/app.component'; 

constructor(public AppComponent: MyApp) { 
    } 

: 페이지 구성 요소 TS 파일

Answer 4