所有页面的普通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>