所有页面本机脚本的通用ActionBar和侧抽屉组件

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>