모든보기에서 Telerik Sidedrawer 만들기

Question

Telerik Side-drawer를 한 번에 볼 수있게되었지만 전 세계적으로 사용할 수있는 구성 요소로 만들었습니다.

저는 복사하여 모든보기에 붙여 넣으려고합니다. 그래서 제 질문은 어떻게 재사용 가능한 구성 요소로 바꿀 수 있습니까?

Answer 1

그래서 당신은 page-router-outlet

의 주요 응용 프로그램 <page-router-outlet></page-router-outlet> 템플릿 수정하지 마십시오 사용할 때 - 당신이 그렇지 않으면 느낄 수 있지만 미세 (페이지 라우터 출구 작품은 메인 페이지에 측면 서랍을 추가하는 방법을 - 문서 오해의 소지가 있지만 그렇게 작동합니다). 는 TS 부분이 예를 들어 SideDrawer 구성 요소를 기반으로합니다

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

:

지금 측면 서랍을 포함하면 지침이 될 것입니다 구성 요소를 만들고, 템플릿을 이잖아. 그 그렇게 선언 있다고하자 (I 찢어진로 실제 파일 @Component에 경로를 변경주의하시기 바랍니다 실제 프로젝트 - 해당 템플릿은 components/header/header.component.html에 나를 위해 배치되고 your-header 지시어 기지 않도록) :

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

실제 페이지에서

당신이 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 }); 

뭔가 지시를 내장 년 유 만든 것이 실수를 작동하지 않으면, 당신은 SideDrawer을 던질 수 있고 당신이 (ng-content을 통해 제대로 전달 HTML)

작업 얻을 때까지,이 그냥 레이블을 추가

형태가 1.3.x 인 것을주의하십시오. SideDrawer와 나는 당신의 부트 스트랩 파일을 명백하게 바꿀 것이지만 1.4.x에 변화가 있다고 생각합니다. 그러나 처리는 그대로 유지됩니다.

SideDrawer 템플릿에 모든 내용을 래핑해야합니다. 그렇지 않으면 두 개의 뷰 서랍이 생기며 플랫하게 떨어집니다 (SideDrawer에는 자체 드로잉 메서드가 있음). SideDrawer를 일부 페이지에서 사용하지 않으려면 지시문을 포함하지 말아야합니다.

또한 정상적인 지시어이므로 직원에게 머리글 <your-header variable="variableValue">을 전달할 수 있습니다. 톱 페이지 align 모델과 ActionBar의 옵션간에이 방법을 전환 할 수 있습니다.