在所有視圖中生成Telerik Sidedrawer

Question

我已成功獲得Telerik Side-drawer在一個視圖中工作，但我堅持將其設置爲可在全局範圍內使用的組件。

我想避免將它複製並粘貼到每個視圖中，所以我的問題是如何將它變成可重用組件。

Answer 1

所以當你使用page-router-outlet

不要修改主要的應用程序模板<page-router-outlet></page-router-outlet> - 你可能會覺得，否則但其精（頁面路由器出口工程將一側抽屜僅添加到主網頁的方式 - 文件可能會產生誤導，但它的工作原理就是這樣）。

現在創建，這將是你的指令包含側抽屜組件，這就是模板：

<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> 

的TS部分將基於例如SideDrawer組件。比方說，它宣稱這樣的（請注意，@Component改變你的路到實際的文件，因爲我撕開，從實際項目 - 使模板放置我components/header/header.component.html並將於基地your-header指令）：

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

在您的實際頁面（再次展示了它在我的項目login頁）你通過這個新指令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] 
}) 

你包裹login.component.html在指令

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

它會做的是始終在sidedrawer內容部分（SideDrawer模板中的ng-content）產生您的頁面內容，就像角色作品中的普通指令一樣。

唯一缺失的事情是在引導啓動時添加Sidedrawer指令本身。

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

如果事情不嵌入指令工作的，美犯的錯誤，你可以扔掉了SideDrawer並添加只是一些標籤在那裏，直到你得到它的工作（正常通過ng-content HTML）

請注意，這是形式1.3.x SideDrawer和我相信有變化1.4.x明顯會改變你的引導文件，但處理保持不變。

請注意，一切都需要在SideDrawer模板中包裝，否則您將有兩個視圖抽屜，它將會保持平坦（SideDrawer有它自己的「繪圖」方法）。如果你不想在某個頁面上使用SideDrawer，你只需要不包含指令。

此外，因爲這是正常的指令，你可以通過工作人員給你標題<your-header variable="variableValue">。您可以在首頁align模型和ActionBar的選項之間切換。