gpt4 book ai didi

angularjs - 在所有 View 中制作 Telerik Sidedrawer

转载 作者:太空狗 更新时间:2023-10-29 17:52:37 24 4
gpt4 key购买 nike

我已经成功地让 Telerik Side-drawer 在一个 View 中工作,但我仍然坚持将它变成一个我可以在全局范围内使用的组件。

我想避免将它复制并粘贴到每个 View 中,所以我的问题是如何将它变成可重用的组件。

最佳答案

所以当你使用 page-router-outlet

请勿修改主应用程序模板 <page-router-outlet></page-router-outlet> - 你可能会有不同的感觉,但它很好(页面路由器 socket 的工作方式只会将侧抽屉添加到主页 - 文档可能会产生误导,但它是这样工作的)。

现在创建一个包含侧边抽屉的指令组件,这就是模板:

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

它会做的是始终在侧边栏内容部分(侧边栏模板中的 ng-content)生成您的页面内容,就像 Angular 作品中的普通指令一样。

唯一缺少的是在引导启动时添加 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 有变化这显然会改变您的 Bootstrap 文件,但处理方式保持不变。

请注意,所有内容都需要包装在 SideDrawer 模板中,否则您将有两个 View 抽屉并且它会变得平坦(SideDrawer 有自己的“绘图”方法)。如果您不想在某些页面上使用 SideDrawer,则只需不包含该指令即可。

此外,由于这是正常指令,您可以将工作人员传递给标题 <your-header variable="variableValue"> .您可以通过这种方式在首页之间切换 align ActionBar 的型号和选项.

关于angularjs - 在所有 View 中制作 Telerik Sidedrawer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39752493/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com