Question

说明

我正在浏览文档和NativeScript＆gffub上的一些项目，如this，其中讨论了如何实现Drawer Navigation。

我很想知道抽屉组件的XML被复制并放在每个页面的顶部。

例如，在 home.component.html

中

<!--
RadSideDrawer is a UI component part of the Progress NativeScript UI set of components.
Learn more about the RadSideDrawer UI component and how it can be customized in this documentation article:
http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started
The RadSideDrawer component is designed to be used as a root element and
it shouldn't have any other siblings other than the <ActionBar> component.
-->
<RadSideDrawer #drawer showOverNavigation="true" [drawerTransition]="sideDrawerTransition">
    <!--
    Use the tkDrawerContent directive to display the content of the app drawer on this page.
    -->
    <StackLayout tkDrawerContent>
        <MyDrawer [selectedPage]="'Home'"></MyDrawer>
    </StackLayout>

    <!--
    Use the tkMainContent directive to display the content of the page when you have an app drawer.
    -->
    <StackLayout class="page appPage homePage" tkMainContent>
    </StackLayout>
</RadSideDrawer>

这段代码将被复制并放置在每个其他页面视图的顶部。那是很多冗余的代码。

问题：

为什么他们会在每个页面的抽屉视图中复制？有没有办法包含一个视图？

角度方式只是在html文件中编写抽屉选择器，但是由于NativeScript视图是XML，因此无效。

Answer 1

如果你使用角度应该工作。为抽屉内容创建一个组件，然后只需设置选择器并将其添加到抽屉视图中。

像

@Component({
    selector: "my-drawer-content",
    moduleId: module.id,
    templateUrl: "./drawercontent.component.html",
    styleUrls: ["./drawercontent.component.css"],
})

在声明中将其添加到app.module.ts文件中，然后在主视图中使用<my-drawer-content></my-drawer-content>。

如何在组件的视图中包含xml？

说明

问题：

1 个答案: