搜索文档 /

角导航

本指南涵盖了路由是如何在一个用Ionic和Angular构建的应用程序中工作的。betway东盟体育app

Angular Router是Angular应用中最重要的库之一。如果没有它,应用程序将是单视图/单上下文应用程序,或者在浏览器重新加载时无法维持其导航状态。有了Angular Router,我们就可以创建可链接且有丰富动画的富应用(当然,当与Ionic搭配时)。betway东盟体育app让我们来看看Angular路由器的基础知识,以及如何在Ionic应用中配置它。betway东盟体育app

一个简单的路线

对于大多数应用程序来说,通常都需要某种路径。最基本的配置看起来有点像这样:


             
              进口
             
              
             RouterModule
              
             
              
             
              “@angular /路由器”
              
             
              NgModule
              
              
             进口
              
             
              
             
              ...
             RouterModule
              
              forRoot
              
              
             
              
             路径
              
             
              
              
             组件
              
             LoginComponent
              
              
             
              
             路径
              
             
              “细节”
              
             组件
              
             DetailComponent
              
              
             
              
              
             
              
              
             
              
              
复制 复制

最简单的分解方法是路径/组件查找。当我们的应用程序加载时,路由器通过读取用户试图加载的URL来启动。在我们的示例中,我们的路由查找 ,也就是我们的索引路由。对于这个,我们加载 LoginComponent .相当直接。这种将路径与组件匹配的模式适用于我们在路由器配置中的每个条目。但如果我们想在初始加载时加载一个不同的路径呢?

处理重定向

为此,我们可以使用路由器重定向。重定向的工作方式与典型的路由对象相同,但只包括几个不同的键。


              
             
              
             路径
              
             
              
              
             redirectTo
              
             
              “登录”
              
             pathMatch
              
             
              “全部”
             
              
              
             
              
             路径
              
             
              “登录”
              
             组件
              
             LoginComponent
              
              
             
              
             路径
              
             
              “细节”
              
             组件
              
             DetailComponent
              
             
              
              
复制 复制

在我们的重定向中,我们寻找应用的索引路径。如果我们加载它,我们重定向到 登录 路线。最后一把钥匙 pathMatch 来告诉路由器应该如何查找路径。

因为我们使用 完整的 ,我们告诉路由器我们应该比较完整的路径,即使最后是这样的 / route1 route2 / route3 .这意味着如果我们有:


              
             路径
              
             
              ' / route1 / route2 / route3 '
              
             redirectTo
              
             
              “登录”
              
             pathMatch
              
             
              “全部”
             
              
              
             
              
             路径
              
             
              “登录”
              
             组件
              
             LoginComponent
              
              
复制 复制

和负载 / route1 route2 / route3 我们将重定向。但是如果我们加载 / route1 route2 / route4 ,我们不会重定向,因为路径不完全匹配。

或者,如果我们使用:


              
             路径
              
             
              “/ route1 / route2”
              
             redirectTo
              
             
              “登录”
              
             pathMatch
              
             
              “前缀”
             
              
              
             
              
             路径
              
             
              “登录”
              
             组件
              
             LoginComponent
              
              
复制 复制

然后加载 / route1 route2 / route3 / route1 route2 / route4 ,我们将被重定向为两个路线。这是因为 pathMatch:“前缀” 将只匹配部分路径。

谈论路线是很好的,但一个人实际上如何导航到这些路线呢?为此,我们可以使用 routerLink 指令。让我们回到前面简单的路由器设置:


             RouterModule
              
              forRoot
              
              
             
              
             路径
              
             
              
              
             组件
              
             LoginComponent
              
              
             
              
             路径
              
             
              “细节”
              
             组件
              
             DetailComponent
              
             
              
              
              
复制 复制

现在从 LoginComponent ,我们可以使用下面的HTML导航到详细路由。


                <
               ion-header
               >
             
                <
               ion-toolbar
               >
             
                <
               ion-title
               >
             登录
                
               ion-title
               >
             
                
               ion-toolbar
               >
             
                
               ion-header
               >
             
                <
               离子含量
              
               
                
                
               ion-padding
                
               >
             
                <
               ion-button
              
               (routerLink)
                
                
               (“/明细”)
                
               >
             去详细
                
               ion-button
               >
             
                
               离子含量
               >
复制 复制

这里重要的部分是 ion-button routerLink 指令。RouterLink的工作原理与之类似 href 的URL,但不是将URL构建为一个字符串,而是可以构建为一个数组,这可以提供更复杂的路径。

我们还可以通过使用路由器API在应用程序中进行编程导航。


              进口
             
              
             组件
              
             
              
             
              “@angular /核心”
              
             
              进口
             
              
             路由器
              
             
              
             
              “@angular /路由器”
              
             
              组件
              
              
             
              ...
             
              
              
             
              出口
             
              
             
              LoginComponent
             
              
             
              构造函数
              
               私人
              路由器
               
              路由器
              
              
              
             
              导航
              
              
              
             
              
              
             路由器
              
              导航
              
              
              ' /细节'
              
              
             
              
             
              
复制 复制

这两个选项提供了相同的导航机制,只是适合不同的用例。

关于使用相对url进行导航的注意事项:目前,为了支持多个导航堆栈,不支持相对url

延迟加载的路线

现在,我们当前的路由设置方式使得它们被包含在与根app.module相同的块中,这不是理想的。相反,路由器有一个设置,允许组件被隔离到他们自己的块。


             
              进口
             
              
             RouterModule
              
             
              
             
              “@angular /路由器”
              
             
              NgModule
              
              
             进口
              
             
              
             
              ...
             RouterModule
              
              forRoot
              
              
             
              
             路径
              
             
              
              
             redirectTo
              
             
              “登录”
              
             pathMatch
              
             
              “全部”
             
              
              
             
              
             路径
              
             
              “登录”
              
             
              loadChildren
              
             
              
              
             
              =>
             
              进口
              
              “/登录/ login.module。”
              
              
              然后
              
              
             
              =>
             
              
             LoginModule
              
             
              
              
             
              
             路径
              
             
              “细节”
              
             
              loadChildren
              
             
              
              
             
              =>
             
              进口
              
              “/细节/ detail.module。”
              
              
              然后
              
              
             
              =>
             
              
             DetailModule
              
             
              
             
              
              
             
              
              
             
              
              
复制 复制

虽然相似,但 loadChildren 属性是通过使用本机导入而不是直接引用组件来引用模块的一种方法。为了做到这一点,我们需要为每个组件创建一个模块。


              ...
             
              进口
             
              
             RouterModule
              
             
              
             
              “@angular /路由器”
              
             
              进口
             
              
             LoginComponent
              
             
              
             
              ”。/ login.component '
              
             
              NgModule
              
              
             进口
              
             
              
             
              ...
             RouterModule
              
              forChild
              
              
             
              
             路径
              
             
              
              
             组件
              
             LoginComponent
              
              
             
              
              
             
              
              
             
              
              
复制 复制

我们排除了一些额外的内容,只包括必要的部分。

在这里,我们有一个典型的Angular模块设置,以及一个RouterModule导入,但我们现在使用的是 forChild 并在那个设置中声明组件。有了这个设置,当我们运行构建时,我们将为app组件、登录组件和细节组件生成单独的块。

生活的例子

如果您更喜欢使用上面描述的概念和代码,请查看我们的 生活的例子 关于StackBlitz的上面的主题。

使用标签

通过Tabs, Angular路由器为Ionic提供了一种机制来知道哪些组件应betway东盟体育app该被加载,但繁重的工作实际上是由Tabs组件来完成的。让我们看一个简单的例子。


              常量
             路线
              
             路线
              
             
              
             
              
             路径
              
             
              “标签”
              
             组件
              
             TabsPage
              
             孩子们
              
             
              
             
              
             路径
              
             
              “tab1”
              
             孩子们
              
             
              
             
              
             路径
              
             
              
              
             
              loadChildren
              
             
              
              
             
              =>
             
              进口
              
              “. . / tab1 / tab1.module”
              
              
              然后
              
              
             
              =>
             
              
             Tab1PageModule
              
             
              
             
              
             
              
              
             
              
             路径
              
             
              
              
             redirectTo
              
             
              /标签/ tab1的
              
             pathMatch
              
             
              “全部”
             
              
             
              
             
              
              
             
              
             路径
              
             
              
              
             redirectTo
              
             
              /标签/ tab1的
              
             pathMatch
              
             
              “全部”
             
              
             
              
              
复制 复制

这里我们有一个我们加载的“tabs”路径。在这个例子中,我们称路径为“tabs”,但是路径的名称可以更改。它们可以被称为任何适合你的应用程序。在路由对象中,我们也可以定义一个子路由。在这个例子中,顶级子路由“tab1”充当我们的“outlet”,并可以加载额外的子路由。对于本例,我们只有一个子路由,它只加载一个新组件。标签的标记如下:


             
                <
               ion-tabs
               >
             
                <
               ion-tab-bar
              
               
                
                
               
                
               >
             
                <
               ion-tab-button
              
               选项卡
                
                
               tab1
                
               >
             
                <
               ion-icon
              
               的名字
                
                
               闪光
                
               >
                
               ion-icon
               >
             
                <
               ion-label
               >
             选项卡一个
                
               ion-label
               >
             
                
               ion-tab-button
               >
             
                
               ion-tab-bar
               >
             
                
               ion-tabs
               >
复制 复制

如果你以前用Ionic创建过应用程序,那么你应该对这betway东盟体育app一点很熟悉。我们创建一个 ion-tabs 组件,并提供一个 ion-tab-bar .的 ion-tab-bar 提供了一个 ion-tab-button 与一个 选项卡 属性,该属性与路由器配置中的标签“outlet”相关联。的最新版本 @betway东盟体育appionic /角 不再需要 < ion-tab > ,但是允许开发者完全自定义标签栏,并且真实的单一来源存在于路由器配置中。

以前的
生命周期
下一个
配置
Baidu