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中为我放置模板，并将其作为{ {1}}指令）：

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

它会做什么，你的页面的生成内容总是在侧面绘图内容部分（SideDrawer模板中的<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 });传递html）

请注意，它是ng-content SideDrawer形式，我相信1.3.x中的更改会明显改变您的引导程序文件，但处理方式保持不变。

请注意，所有内容都需要包含在SideDrawer模板中，否则您将拥有两个视图抽屉，它将会变平（SideDrawer有自己的“绘图”方法）。如果你不想在某些页面上使用SideDrawer，你就不要包含该指令。

此外，这是正常指令，您可以将工作人员传递给标题1.4.x。您可以在首页<your-header variable="variableValue">模型和align的选项之间进行切换。

在所有视图中制作Telerik Sidedrawer

1 个答案: