角导航
本指南涵盖了路由是如何在一个用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 >
，但是允许开发者完全自定义标签栏，并且真实的单一来源存在于路由器配置中。
