Telerik Sidedrawerをすべてのビューで作成する

Question

Telerik Side-drawerを1つのビューで正常に動作させることができましたが、私はそれをグローバルに使用できるコンポーネントにしています。

私はコピーしてすべてのビューに貼り付けることを避けたいので、私の質問はどのように再利用可能なコンポーネントにすることができます。

Answer 1

ですから、page-router-outlet

メインアプリテンプレート<page-router-outlet></page-router-outlet>を変更しないでください使用している場合 - あなたはそう感じるが、その細かい（ページルータ出口作品が唯一のメインページにサイド引出しを追加する方法かもしれません - ドキュメントを誤解を招くかもしれないが、それはそのように働く）。

今すぐ側の引き出しが含まれていますディレクティブとして使用するコンポーネントを作成して、テンプレートのthats：

<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({ 
    selector: "your-header", 
    templateUrl: "components/header/header.component.html", 
    styleUrls: ['components/header/header.css'], 
}) 

： - そのは、（テンプレートが components/header/header.component.htmlに私のために設置されており、 your-headerディレクティブのベースになるように、私は、実際のプロジェクトからということをリッピングして、実際のファイルへ @Componentであなたのパスを変更するには注意してください）そのように宣言することを言うことができますあなたの実際のページで

あなたは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ページ上に表示）そして、あなたはディレクティブでlogin.component.htmlをラップ

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

どのような処理を行うのかは、角度作業の通常のディレクティブのように、サイドページのコンテンツセクション（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 }); 

何かがそのuはディレクティブを埋め込むことでミスを犯したことを

、あなたがSideDrawerを捨てることができますし、それが（適切 ng-contentてHTMLを渡す）ワーキング得るまで、そこにはいくつかのラベルを追加するに動作しない場合

これはフォーム1.3.x SideDrawerであることに注意してください。1.4.xに変更があり、ブートストラップファイルが明らかに変更される可能性がありますが、処理は同じままです。

SideDrawerテンプレートにすべてをラップする必要があります。そうでなければ、2つのビュードロワーがあり、フラットになります（SideDrawerには独自の「描画」メソッドがあります）。 SideDrawerをいくつかのページで使いたくない場合は、ディレクティブを含めないでください。

また、これは通常の指示であるので、あなたにスタッフの頭を<your-header variable="variableValue">に渡すことができます。トップページalignのモデルとActionBarのオプションの間でこの方法を切り替えることができます。