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

Question

说明：

我正在浏览 NativeScript 的 github 上的文档和一些项目，例如 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>。