NativeScript 侧抽屉无法加载路由器插座

Question

我在 nativescript 中使用 RadSideDrawer 指令创建了侧边菜单，当我尝试在其中加载子路由时，除了默认加载之外，所有后续加载都会显示一个空白屏幕。

这就是我加载内容的方式。

<ScrollView tkMainContent class="menu-content">
    <router-outlet></router-outlet>
</ScrollView>

导航逻辑：

<StackLayout>

        <StackLayout orientation="horizontal" [nsRouterLink]="['./']" class="menu-item" 
                [nsRouterLinkActiveOptions]="{exact: true}" nsRouterLinkActive="active" horizontalAlignment="left">
             <Label text="{{inspectionsIcon}}" class="icon" ></Label>   
             <Label text="Reports"></Label>   
        </StackLayout>

        <StackLayout orientation="horizontal" [nsRouterLink]="['properties']"  class="menu-item" nsRouterLinkActive="active" horizontalAlignment="left">
            <Label text="{{propertiesIcon}}"  class="icon" ></Label>
             <Label text="Properties" ></Label>   
        </StackLayout>

        <StackLayout orientation="horizontal" [nsRouterLink]="['settings']" class="menu-item" nsRouterLinkActive="active" horizontalAlignment="left">
            <Label text="{{settingsIcon}}"  class="icon" ></Label>
             <Label text="Settings"></Label>   
        </StackLayout>



    </StackLayout>

因此，当父路由加载时，我会看到默认子路由的内容。当我切换到任何其他子路线时，我看到一个空白屏幕。任何解决此问题的帮助将不胜感激。

我知道导航逻辑很好，因为当我注释掉 RadSideDrawer 并将其用作列表视图时它加载正常

Answer 1

当 RadSideDrawer 位于与默认家庭路由器路径相同的组件模板中时，我遇到了同样的问题，其原因是循环引用，在您的情况下为 [nsRouterLink]="['./']

在我的例子中，当我将 console.log 添加到包含我的 RadSideDrawer 的 HomeComponent 的构造函数中时，我看到构造函数被触发了两次以及我在里面的标签：

<ScrollView tkMainContent class="menu-content">

解决方案（Telerik 向我建议）是让默认路由指向另一个“登录页面”，例如 [nsRouterLink]="['welcomPage']，从而删除循环引用。