Angular 使用底部导航（非TabView）崩溃的选项卡导航

我正在尝试使用而不是TabView制作一个选项卡式导航应用程序。我基于它支持嵌套页面路由器出口。我可以让它工作，但我遇到的一个问题是，当我恢复应用程序时，它崩溃了。我假设这是因为我用页面路由器插座做的是脏的

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to resume activity {org.nativescript.nestedroutertabview/com.tns.NativeScriptActivity}: java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
at android.app.ActivityThread.performResumeActivity(ActivityThread.java:3822)
at android.app.ActivityThread.handleResumeActivity(ActivityThread.java:3854)
at android.app.servertransaction.ResumeActivityItem.execute(ResumeActivityItem.java:51)
at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:145)
at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:70)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1816)
at android.os.Handler.dispatchMessage(Handler.java:106)
at android.os.Looper.loop(Looper.java:193)
at android.app.ActivityThread.main(ActivityThread.java:6718)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
Caused by: java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
at android.view.ViewGroup.addViewInner(ViewGroup.java:5034)
at android.view.ViewGroup.addView(ViewGroup.java:4865)
at android.view.ViewGroup.addView(ViewGroup.java:4805)
at android.view.ViewGroup.addView(ViewGroup.java:4778)

我会解释我改变的事情

在app-routing.module中：我删除了行

{path:，重定向到：“/login”，pathMatch:“full”}，

，因为我想让app在选项卡页而不是登录页上启动。除了添加

this.routerExtension.navigate（[“/tabs/default”]，{clearHistory:true}）之外，我想不出一个好方法来实现这一点应用程序内组件

在tabs.component.html中，这是我的页面路由器出口设置：

<GridLayout rows="*, auto">
    <page-router-outlet name="playerTab" actionBarVisibility="never" visibility="{{  (selectedTab == 0) ? 'visible' : 'collapsed' }}"></page-router-outlet>
    <page-router-outlet name="teamTab" actionBarVisibility="never" visibility="{{  (selectedTab == 1) ? 'visible' : 'collapsed' }}"></page-router-outlet>

    <StackLayout row="1" verticalAlignment="bottom">
        <BottomNavigation id="bottomNavigation" activeColor="#00C99D" [tabs]="tabs" titleVisibility="never" (tabSelected)="onBottomNavigationTabSelected($event)"></BottomNavigation>
    </StackLayout>
</GridLayout>



我只是隐藏未使用的插座并显示当前选项卡。我所做的一切对我来说似乎都不干净

以下是指向我的项目的链接：

非常感谢您的帮助。
感谢您使用我的插件：D我认为问题在于您正在使用可见性属性。我建议你改用ngSwitch。在主GridLayout中设置NgSwitch，然后将每个页面路由器出口包装在StackLayout中，您可以将NgCase设置为基于所选选项卡显示页面路由器出口

我希望这能有所帮助：D
我暂时找到了一个解决方案。如果我在可见性属性上使用“隐藏”属性而不是“折叠”，它将不再崩溃。我仍然不认为这是正确的做法，因此如果有人有任何想法，我们将不胜感激。
我尝试过这一方法，但插座似乎不再正确呈现，它只是一个空白的白色页面。我找到了一个暂时的解决方法，使用“隐藏”而不是“折叠”。您是否尝试将ngCase应用于每个页面路由器出口directl6？