所有页面原生脚本的通用 ActionBar 和 Side Drawer 组件

Question

我有几个页面的 angular2-nativescript 应用程序。结构类似于杂货示例。所有页面都有非常相似的操作栏内容，所以我不想为每个页面添加所有操作栏和 SideDrawer 事件处理程序或向每个页面模板添加自定义组件

有没有办法让所有应用程序页面都拥有单个 ActionBar 和 SideDrawer 组件？此外，能够从所有页面访问此组件并从页面类调用其方法也很重要（因此我可以告诉此组件它应该隐藏/显示一些内容）。我想在将来使用一些动作栏动画，所以每次页面更改时都不应该重新创建我的动作栏

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>