Angularjs 在所有视图中制作Telerik Sidedrawer

我已经成功地让Telerik侧边抽屉在一个视图中工作，但我一直在努力使其成为一个可以在全球范围内使用的组件

---

我希望避免将其复制粘贴到每个视图中，因此我的问题是如何将其转换为可重用组件。

因此，当您使用

页面路由器插座时

不要修改主应用程序模板

-您可能会有其他感觉，但这很好（页面路由器插座的工作方式只会将侧抽屉添加到主页-文档可能会误导您，但它的工作原理是这样的）

现在创建一个组件，该组件将成为您的指令，其中包含侧抽屉，即模板：

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

在您的实际页面中（再次在我的项目

登录

页面上显示），您传递此新指令

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并在那里添加一些标签，直到你让它工作（正确地通过

ng内容传递html

）

请注意，这是表单

1.3.x

SideDrawer，我相信

1.4.x

中的更改会明显更改引导文件，但处理保持不变

请注意，所有内容都需要包装在SideDrawer模板中，否则您将有两个视图抽屉，并且它将平放（SideDrawer有自己的“绘图”方法）。如果你不想在某个页面上显示SideDrawer，你只需要不包含指令

---

此外，由于这是正常指令，您可以将工作人员传递给标题

。您可以通过这种方式在顶部页面

align

模式和

ActionBar

选项之间切换。您好，您是否可以共享到目前为止获得的代码，以帮助人们回答您的问题，并充实您的问题，以帮助防止投票被否决。如果我使用页面路由器插座，它将不起作用，而不是屏蔽内容。操作栏变空了。但是如何实现路由呢？路由并没有真正改变。您不应该更改

页面路由器出口

模板，因为它不像正常指令那样工作，据我所知，新页面正在替换根页面。这就是为什么将操作栏放在

页面路由器插座中的人在第一页看到操作栏，但在另一页上看不到。sidedrawer的实现是围绕
页面路由器出口
构建方式的一大难题；]
SIDEDRAWER\u提供程序
对于最新版本的RadSideDrawer似乎已经过时。有简单的替代方案吗？
SIDEDRAWER\u指令
？
<your-header>
    <StackLayout class="content">
        <label class="h1 left" text="Please Login"></label>
    </StackLayout>
</your-header>

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