общий компонент ActionBar и Side Drawer для всех страниц, собственный скрипт

У меня есть приложение angular2-nativescript с несколькими страницами. структура аналогична примеру с продуктами. Все страницы имеют очень похожее содержимое панели действий, поэтому я не хочу добавлять всю панель действий и обработчики событий SideDrawer для каждой страницы или добавлять пользовательский компонент в каждый шаблон страницы.

Есть ли способ иметь один компонент ActionBar и SideDrawer для всех страниц приложения? Также важно иметь возможность доступа к этому компоненту со всех страниц и вызова его методов из класса страницы (чтобы я мог сказать этому компоненту, что он должен скрывать / показывать некоторый контент). Я хочу использовать некоторую анимацию панели действий в будущем, поэтому мой ActionBar не должен воссоздаваться каждый раз при изменении страницы.


nativescript angular2-nativescript nativescript-telerik-ui
person mohammed besher    schedule 11.11.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я создал компоненты, которые содержат боковой ящик.

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>
person mohammed besher    schedule 16.12.2017