gemeinsame ActionBar und Seitenschubkomponente für alle Seiten nativen Skript

Question

Ich habe angular2-nativescript Anwendung mit mehreren Seiten. Struktur ähnelt Lebensmittelbeispielen. Alle Seiten haben sehr ähnliche Aktionsleisteninhalte, daher möchte ich nicht alle Aktionsleisten- und SideDrawer-Ereignisbehandlungsroutinen für jede Seite hinzufügen oder benutzerdefinierte Komponenten zu jeder Seitenvorlage hinzufügen

Gibt es eine Möglichkeit, eine einzelne ActionBar- und SideDrawer-Komponente zu verwenden? alle Anwendungsseiten? Auch ist es wichtig, die Möglichkeit zu haben, diese Komponente für den Zugriff von allen Seiten und ihre Methoden ab Seite Klasse aufrufen (so kann ich diese Komponente sagen, dass es sollte verstecken/zeigen einige Inhalte). Ich mag eine Aktion bar Animation in Zukunft verwenden, um meine ActionBar nicht jedes Mal Seite Änderungen neu erstellt werden soll

Answer 1

I-Komponenten erstellt, die Seiten Schublade enthalten.

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(); 
     } 

fügen Sie es auf jeder Seite und passen Sie es Ein- und Ausgangsparameter mit

<sideDrawer [title]="'category' | translate"></sideDrawer>