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

Posted 2023-04-13

【中文标题】所有页面原生脚本的通用 ActionBar 和 Side Drawer 组件

【英文标题】：common ActionBar and Side Drawer component for all pages native script

【发布时间】：2018-04-24 15:24:26

【问题描述】：

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

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

【参考方案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>