首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

导航目标对此NavController未知吗?

这个错误信息表明你要导航到的目标(destination)当前NavController并不知道

  1. 确保你要导航到的视图已经在RouterModuleimports数组中声明。例如:
代码语言:javascript
复制
const routes: Routes = [
  { path: 'your-path', component: YourComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}
  1. 确保在AppComponent的模板中包含了<router-outlet>标签。这个标签是用来显示导航到的组件的内容的:
代码语言:javascript
复制
<router-outlet></router-outlet>
  1. 确保你使用的NavController实例是在RouterOutlet的作用域内。如果你在组件外部使用NavController,你需要导入Router并在构造函数中注入它:
代码语言:javascript
复制
import { Router } from '@angular/router';

constructor(private router: Router) { }

然后你可以使用router.navigate()方法来进行导航:

代码语言:javascript
复制
this.router.navigate(['/your-path']);
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

深入浅出 NavigationUI | MAD Skills

概述 在之前的 导航系列文章中,Chet 开发了一个用于 跟踪甜甜圈的应用。知道什么是甜甜圈的最佳搭档?(难道是另一个甜甜圈?) 当然是咖啡!所以我准备增加一个追踪咖啡的功能。...我需要在应用中增加一些页面,所以有必要使用抽屉式导航栏或者底部标签栏来辅助用户导航。但是我们该如何使用这些 UI 组件来集成导航功能呢?通过点击监听器手动触发导航动作? 不需要!无需任何监听器。...NavigationUI 类通过匹配目标页面 id 与菜单 id 实现不同页面之间的导航功能。让我们深入探索一下它的内部机制吧。...setupWithNavController(navController) } 请注意我并没有从导航图中调用任何导航操作。实际上导航图中甚至没有前往 coffeeList Fragment 的路径。...setupWithNavController(navController) } 现在当我在屏幕较宽的设备上运行应用时,可以看到抽屉式导航栏已经设置了 MenuItem,并且在导航图中,MenuItem

3K30
  • 安卓Navigation系列——进阶篇

    e) { return false; } } 还记得上篇介绍过的,怎么从一个页面跳转到另一个页面的,这里也一样,其实最终就是调用到了navController.navigate...还记得前面有分析到,BottomNavigationView是怎么做到页面切换的,把上面代码照样搬过来, public static boolean onNavDestinationSelected(...navOptions, navigatorExtras); ...... } 可以看到,在第二个重载方法中,通过findDestination方法传入导航目标页面的...获取navigator,那么这个navigator是什么呢,还记得上面分析的NavHostFragment经过oncreate方法之后,navigatorProvider总共缓存了四个navigator,...(fragmentNavigator) //通过代码将导航资源文件设置进去 navController.setGraph(R.navigation.fix_nav_graph

    3.1K30

    谷歌官方组件Navigation你了解了吗?

    导航组件的构成 导航组件由三个关键的部分组成: Navigation graph(导航图): 这是一个包含所有位置导航相关信息的XML资源文件。...这里包括应用程序当中的所有单独的内容区域(被称为目标视图),以及连接在应用程序当中各个“目标”的路径。 NavHost: 一个用于展示导航图当中目标视图的空的容器。...NavController: 管理NavHost中的应用程序导航的对象。 当用户在整个应用程序中移动时,NavController会协调NavHost中目标内容的交换。...当我们通过导航浏览我们的应用程序的时候,我们可以通知NavController我们要沿着导航图当中的特定的路径进行导航,或者直接导航到特定的目的地。...接下来NavController可以在NavHost当中显示出适当的目标视图。 导航组件有很多的好处: 可以处理fragment的事务。 默认情况下可以正确的处理好各个事物之间前后的操作。

    1.1K00

    Jetpack组件之Navigation

    优点 可视化的页面导航图,可以使用 Android Studio 的 Navigation Editor 来查看和编辑导航图。 通过destination和action完成页面间的导航。...通过NavigationUI类,对菜单、底部导航、抽屉菜单导航进行统一的管理。 主要元素 Navigation Graph。...()添加菜单,则可以通过覆盖Activity的onOptionsItemSelected()以调用onNavDestinationSelected(),从而将菜单项与目标页相关联。...|| super.onOptionsItemSelected(item); } 当我们在Fragment中添加菜单跳转目标页时,需要覆盖目标页面onCreateOptionsMenu...(navView, navController); 导航事件监听 NavController提供了一个名为OnDestinationChangedListener的接口,对页面切换事件进行监听,该接口在页面发生切换或参数改变时调用

    3K20

    compose--附带效应、传统项目集成、导航

    接下来使用navController导航到不同的可组合项,下面是官方给出的示例的几种方式: 在导航到“friendslist”并加到返回堆栈中 navController.navigate("friendslist...") 在导航到“friendslist”之前,将所有内容从后堆栈中弹出到“home”(不包含home) navController.navigate("friendslist") { popUpTo...("home") } 在导航到“friendslist”之前,从堆栈中弹出所有内容,包括“home” navController.navigate("friendslist") { popUpTo...("home") { inclusive = true } } 只有当我们还不在“search”时,才能导航到“search”目标地,避免在后堆栈的顶部有多个副本 navController.navigate...("search") { launchSingleTop = true } 例子: 我们给App添加上Scaffold,并在底部导航栏进行navController导航的控制 class NaviActivity

    2.2K40

    谷歌官方组件Navigation你会用了吗?

    导航是发生在应用的目标示图之间——用户可以导航到应用当中的任何的位置。...将这些目标视图通过操作来连接起来。 导航图是包括所有的目标视图和操作的一个资源文件,这个导航图标代表了我们应用的所有的导航路径图。...然后我们直接拖NavHostFragment 的视图到我们的activity文件当中 在导航视图当中添加目标视图 这里总共有三种不同的方式可以在我们的导航视图当中添加目标视图 添加已经存在的目标视图 如果我们想把已经存在的目标视图想要添加在导航图当中...导航目标视图,我们需要用到NavController,它是用于管理NavHost中的应用程序导航的对象。...每个NavHost都有自己的相应NavController

    1.1K10

    【详解】Android Jetpack 新组件之Navigation的用法和源码结构分析

    >>>> 传递数据 您可以通过两种方式在目标之间传递数据:使用Bundle对象或使用safeargs Gradle插件以类型安全的方式传递数据。...导航架构组件有一个名为safeargs的Gradle插件,它生成简单的对象和构建器类,以便对目标和动作指定的参数进行类型安全访问。...>>>> Deeplink-深度链接跳转 在Android中,深层链接是指向应用中特定目标的URI。类似Activity的scheme协议。...,我们需要在目标的Activity中重写onSupportNavigateUp,以确保导航器能够正确的回退栈。...在oncreate的时候实例化NavController,它才是真正处理导航的,并且把FragmentNavigator实例化添加到SimpleNavigatorProvider @Override

    2.2K40

    使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

    关于导航的更详细的解释,我推荐看看一个相关的Ionic 2导航指南。 2. 设置主页(Home page) 现在我们已经建立了基本的应用程序,让故事开始吧。首先,让我们建立todo列表模板。...不同属性的行为可能会有所不同,取决于在什么平台上运行,以iOS为例,将end会将按钮放到导航栏的右边。...title: 'hi3', description: 'test3'} ]; } addItem(){ } viewItem(){ } } 还记得大明湖畔的夏雨荷?...哦不是,还记得之前我们如何给homePage分配一个any类型变量?现在我们在构造函数中分配一个NavController类型给navCtrl参数。...还记得如何创建页面,运行下面的代码创建一个 item-detail 页面: ionic g page ItemDetailPage time and time again,我们需要在 app.module.ts

    6.1K50

    Android Navigation的四大要点你都知道

    1 在JetPack中有一个组件是Navigation,顾名思义它是一个页面导航组件,相对于其他的第三方导航,不同的是它是专门为Fragment的页面管理所设计的。...它有一个属性startDestination用来定义导航栈的根入口fragment fragment: 顾名思义fragment页面。...通过destination来关联将要跳转的目标fragment。 以上是nav_graph.xml的基本配置。 在配置完之后,我们还需要将其关联到Activity中。...@anim/slide_out_right" /> 29 30 31 ... 32 对应四个动画配置参数 enterAnim: 配置进场时目标页面动画...exitAnim: 配置进场时原页面动画 popEnterAnim: 配置回退pop时目标页面动画 popExitAnim: 配置回退pop时原页面动画 通过上面的配置你可以看到如下效果 ?

    1.7K30

    JetPack指路明灯—Navigation

    多个destination连接起来就组成了一个栈导航图,destination之间连接就是action。...同时,在onCreate的时候,创建了NavController,与mGraphId进行绑定。 使用路由 在Fragment中,可以通过NavController来进行路由,代码如下所示。...这样的API设计,可以让用户传入View后进行遍历,通过查找指定Tag来获取NavController,简化了调用方式。...添加路由动画 路由切换动画是action的属性,当我们使用action进行路由时,可以指定目标Page,和原Page的动画切换效果,它包含下面几个属性。...enterAnim:目标Page进入动画 exitAnim:目标Page进入时,原Page退出动画 popEnterAnim:目标Page退出动画 popExitAnim:目标Page退出时,原Page

    98420

    【Android进阶必学】JetPack指路明灯—Navigation

    多个destination连接起来就组成了一个栈导航图,destination之间连接就是action。...同时,在onCreate的时候,创建了NavController,与mGraphId进行绑定。 使用路由 在Fragment中,可以通过NavController来进行路由,代码如下所示。...路由跳转 通过NavController进行路由跳转,有多种方式,比如通过路由action指定,也可以指定跳转的destination。...添加路由动画 路由切换动画是action的属性,当我们使用action进行路由时,可以指定目标Page,和原Page的动画切换效果,它包含下面几个属性。...enterAnim:目标Page进入动画 exitAnim:目标Page进入时,原Page退出动画 popEnterAnim:目标Page退出动画 popExitAnim:目标Page退出时,原Page

    2K00

    Navigation深入浅出,到出神入化,再到实战改造

    tools:layout="@layout/fragment_setting" /> ==navigation== :视图导航的根部标签...节点下参数配置说明 ==注:== 节点的含义,即表示 , 图片.png 点击右上角Design,进入Navigation,视图导航编辑页面...是否可以为空 Default Value 为空的时的默认值 更多支持的参数类型: 图片.png 2.2 跳转路由动作 (Action) 图片.png ID 当前跳转动作节点的唯一标识,后续在代码中调用navController.navigation...选中后不可更改 Destination 跳转的目标节点,即那个Fragment enter:进入动画 Exit :退出动画 Pop Enter : 上一节点出栈当前节点的动画 Pop Exit...: 上一节点回退栈到当前节点的动画 Pop To 按返回键会调用 navController.navigationUp或navController.popBackStack()时,想回退定向到那个节点

    59010
    领券