Machen Sie Telerik Sidedrawer in allen Ansichten

Question

Ich habe erfolgreich die Telerik Side-Schublade arbeiten in einer Ansicht, aber ich bin fest mit machen es in eine Komponente, die ich global verwenden kann.

Ich möchte vermeiden, kopieren und fügen Sie es in jede Ansicht, so ist meine Frage, wie kann ich es in eine wiederverwendbare Komponente verwandeln.

Answer 1

Also, wenn Sie verwenden die page-router-outlet

Setzen Sie die App-Vorlage nicht ändern <page-router-outlet></page-router-outlet> - Sie sonst vielleicht das Gefühl, aber es ist in Ordnung (die Art, wie die Seite Router Steckdose funktioniert die Seite Schublade nur auf die Hauptseite hinzufügen würde - Dokumentation könnte irreführend sein, aber es funktioniert so).

nun eine Komponente erstellen, die Sie Richtlinie sein, die die Seiten Schublade enthält, das ist die Vorlage:

<RadSideDrawer #drawer> 
    <StackLayout tkDrawerContent class="sideStackLayout"> 
     <StackLayout class="sideTitleStackLayout"> 

      <ScrollView> 
       <StackLayout class="sideStackLayout"> 

       <!-- content of menu --> 

       </StackLayout> 
      </ScrollView> 
     </StackLayout> 

    </StackLayout> 
    <StackLayout tkMainContent> 
     <ActionBar title=""> 
       <!-- this is your action bar content --> 
     </ActionBar> 
     <ng-content></ng-content> 
    </StackLayout> 
</RadSideDrawer> 

Der TS Teil am Beispiel SideDrawer Komponente basiert. Lassen Sie uns sagen, dass seine so erklärt (bitte Pfade in @Component zu aktuellen Dateien zu ändern beachten als ich von den tatsächlichen Projekt gerissen, dass - so dass Vorlage wird in components/header/header.component.html für mich gesetzt und wird Basis für your-header Richtlinie):

@Component({ 
    selector: "your-header", 
    templateUrl: "components/header/header.component.html", 
    styleUrls: ['components/header/header.css'], 
}) 

in Ihrer aktuellen Seite (wieder zeigt es auf meinem Projekt login Seite) Sie diese neue Richtlinie HeaderComponent

import {HeaderComponent} from "../../header/header.component"; 

@Component({ 
    selector: "login-page", 
    templateUrl: "components/user/login/login.component.html", 
    styleUrls: ['components/user/login/login.css'], 
    directives: [HeaderComponent] 
}) 

geben und Ihnen die login.component.html in der Richtlinie wickeln

<your-header> 
    <StackLayout class="content"> 
     <label class="h1 left" text="Please Login"></label> 
    </StackLayout> 
</your-header> 

Was es tun wird, ist der Inhalt Ihrer Seite immer in siddrawer Inhalt Abschnitt (ng-content in der SideDrawer Vorlage), wie die normalen Direktiven in eckigen Arbeiten.

Die einzige fehlende Sache wäre die Direktive sidedrawer in Ihrer Bootstrap-Initiation hinzuzufügen.

import {nativeScriptBootstrap} from "nativescript-angular/application"; 
import {nsProvideRouter} from "nativescript-angular/router"; 
import {RouterConfig} from "@angular/router"; 
import {AppComponent} from "./app.component"; 
import {SIDEDRAWER_PROVIDERS} from "nativescript-telerik-ui/sidedrawer/angular"; 

import {LandingComponent} from "./components/landingPage/landing.component"; 
import {LoginComponent} from "./components/user/login/login.component"; 



import {ExperimentalComponent} from "./components/experimental/experimental.component"; 


export const AppRoutes: RouterConfig = [ 
    { path: "", component: LandingComponent }, 
    { path: "login", component: LoginComponent }, 

] 

nativeScriptBootstrap(AppComponent, [ 
    [nsProvideRouter(AppRoutes, {})], 
    SIDEDRAWER_PROVIDERS, 
], { startPageActionBarHidden: true }); 

Wenn etwas nicht seine nicht funktioniert, dass u gemachter Fehler in der Richtlinie Einbettung, können Sie die SideDrawer werfen und fügen Sie einfach dort einige Etikett, bis Sie es funktioniert (richtig vorbei html durch ng-content)

Beachten Sie, dass es Formular 1.3.x SideDrawer und ich glaube, es gab Änderungen in 1.4.x, die Ihre Bootstrap-Datei offensichtlich ändern würde, aber die Handhabung bleibt gleich.

Beachten Sie, dass alles in die SideDrawer-Vorlage eingepackt werden muss, da andernfalls zwei Ansichtsfächer vorhanden sind und es flach fällt (SideDrawer hat seine eigene "Zeichen" -Methode). Und wenn Sie den SideDrawer nicht auf einer Seite haben wollen, enthalten Sie die Direktive einfach nicht.

Auch als dies ist normale Richtlinie können Sie Mitarbeiter an Sie übergeben Header <your-header variable="variableValue">. Sie können auf diese Weise zwischen den align Modellen und Optionen für ActionBar wechseln.