共通のActionBarとSide Drawerコンポーネントすべてのページのネイティブスクリプト

Question

私はangular2-nativescriptアプリケーションをいくつかのページに持っています。構造は食料品の例に似ています。すべてのページには非常に似たアクションバーのコンテンツがありますので、各ページにすべてのアクションバーとSideDrawerイベントハンドラを追加したり、各ページテンプレートにカスタムコンポーネントを追加したりしないようにしてください。

単一のActionBarとSideDrawerコンポーネントすべてのアプリケーションページ？また、すべてのページからこのコンポーネントにアクセスし、ページクラスからそのメソッドを呼び出すことが重要です（このコンポーネントには、コンテンツを表示/非表示にする必要があります）。私は今後いくつかのアクションバーアニメーションを使用したいので、私のActionBarはページが変わるたびに再作成されるべきではありません。

Answer 1

サイドドロワーを含むコンポーネントを作成しました。

import { Component, ViewChild, OnInit,ElementRef,Input } from '@angular/core'; 
import { TranslateService } from "ng2-translate"; 
import {Router, NavigationExtras} from "@angular/router"; 
import * as ApplicationSettings from "application-settings"; 
import { Page } from "ui/page"; 
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-pro-ui/sidedrawer/angular"; 
import application = require("application"); 
import { Config } from "../../shared/config"; 
import * as elementRegistryModule from 'nativescript-angular/element-registry'; 
import { RouterExtensions } from "nativescript-angular/router"; 
import { AndroidApplication, AndroidActivityBackPressedEventData } from "application"; 
import { isAndroid } from "platform"; 
import { UserService } from "../../shared/user/user.service"; 
import { SideDrawerLocation } from "nativescript-pro-ui/sidedrawer"; 



@Component({ 
    selector: 'sideDrawer', 
    templateUrl: 'shared/sideDrawer/sideDrawer.component.html', 
    styleUrls: ['shared/sideDrawer/sideDrawer.component.css'] 


}) 

export class SideDrawerComponent implements OnInit { 
    @Input() title ="" 
    @Input() backStatus =true; 
    theme: string="shared/sideDrawer/sideDrawer.component.ar.css"; 
    private drawer: SideDrawerType; 
    private isEnglish=true; 
     @ViewChild(RadSideDrawerComponent) 
    public drawerComponent: RadSideDrawerComponent; 
    constructor(private us: UserService,private translate: TranslateService,private router:Router, private routerExtensions: RouterExtensions,private _page: Page) { } 

    ngOnInit() { 

     this.drawer = this.drawerComponent.sideDrawer; 
     this.drawer.showOverNavigation=true; 
     if (ApplicationSettings.getString("language")=="ar") { 
     this.isEnglish=false; 
       this.drawer.drawerLocation = SideDrawerLocation.Right; 
       this.addArabicStyleUrl(); 
    } 
     if (!isAndroid) { 
       return; 
       } 
       application.android.on(AndroidApplication.activityBackPressedEvent, (data: AndroidActivityBackPressedEventData) => {  
        data.cancel = true; // prevents default back button behavior 
       this.back() ; 
       }); 
     } 


    back() { 
     this.routerExtensions.back(); 
    } 
     public toggleShow(){ 
     this.drawer.showDrawer(); 
     } 

すべてのページにそれを追加し、入力および出力パラメータを使用してカスタマイズ

<sideDrawer [title]="'category' | translate"></sideDrawer>