角导航/h1>
本指南涵盖了用离子和角度构建的应用程序中路由的工作方式。betway东盟体育app/p>
角路由器是角应用中最重要的库之一。没有它,应用程序将是单个视图/单上下文应用程序,或者无法在浏览器重新加载上维护其导航状态。使用Angular Router,我们可以创建可连接并具有丰富动画的丰富应用程序(当然与Ionic配对)。betway东盟体育app让我们看一下Angular路由器的基础知识以及如何为离子应用程序配置它。betway东盟体育app//p>
一条简单的路线/a>
对于大多数应用程序,通常需要拥有某种路线。最基本的配置看起来有点像这样://p>
进口/span>
{//span>
轮廓模型
}//span>
从/span>
'@Angular/Router'/span>
;/span>
@
ngmodule/span>
((/span>
{//span>
进口
:/span>
[[//span>
.../span>
轮廓模型
。/span>
原始/span>
((/span>
[[//span>
{//span>
小路
:/span>
''/span>
,,,,/span>
零件
:/span>
logincomponent
}//span>
,,,,/span>
{//span>
小路
:/span>
'细节'/span>
,,,,/span>
零件
:/span>
详细信息
}//span>
,,,,/span>
这是给予的//span>
)/span>
这是给予的//span>
,,,,/span>
}//span>
)/span>
我们这里拥有的最简单的细分是路径/组件查找。当我们的应用程序加载时,路由器通过阅读用户试图加载的URL来启动问题。在我们的样本中,我们的路线寻找
''/code>
,从本质上讲,这是我们的索引路线。因此,我们加载了
logincomponent/code>
。非常坦率的。对于我们在路由器配置中拥有的每个条目,这种与组件的匹配路径的模式继续。但是,如果我们想在初始负载上加载不同的路径怎么办?//p>
处理重定向/a>
为此,我们可以使用路由器重定向。重定向的工作方式与典型的路由对象相同,但仅包含一些不同的键。//p>
[[//span>
{//span>
小路
:/span>
''/span>
,,,,/span>
重定向
:/span>
'登录'/span>
,,,,/span>
路径比
:/span>
'满的'/span>
}//span>
,,,,/span>
{//span>
小路
:/span>
'登录'/span>
,,,,/span>
零件
:/span>
logincomponent
}//span>
,,,,/span>
{//span>
小路
:/span>
'细节'/span>
,,,,/span>
零件
:/span>
详细信息
}//span>
这是给予的//span>
;/span>
在我们的重定向中,我们寻找应用程序的索引路径。然后,如果我们加载它,我们将其重定向到
登录/code>
路线。最后的关键
路径比/code>
需要告诉路由器如何查找路径。/p>
因为我们使用
满的/code>
,我们告诉路由器,即使最终成为类似的东西,我们也应该比较完整的道路
/Route1/Route2/Route3/code>
。意味着如果我们有://p>
{//span>
小路
:/span>
'/oute1/oute2/oute3'/span>
,,,,/span>
重定向
:/span>
'登录'/span>
,,,,/span>
路径比
:/span>
'满的'/span>
}//span>
,,,,/span>
{//span>
小路
:/span>
'登录'/span>
,,,,/span>
零件
:/span>
logincomponent
}//span>
,,,,/span>
和加载
/Route1/Route2/Route3/code>
我们将重定向。但是如果我们加载了
/Route1/Route2/Route4/code>
,我们不会重定向,因为路径不完全匹配。/p>
或者,如果我们使用:/p>
{//span>
小路
:/span>
'/oute1/oute2'/span>
,,,,/span>
重定向
:/span>
'登录'/span>
,,,,/span>
路径比
:/span>
'字首'/span>
}//span>
,,,,/span>
{//span>
小路
:/span>
'登录'/span>
,,,,/span>
零件
:/span>
logincomponent
}//span>
,,,,/span>
然后加载
/Route1/Route2/Route3/code>
和
/Route1/Route2/Route4/code>
,我们将重定向两种路线。这是因为
路径:“前缀”/code>
仅匹配路径的一部分。/p>
导航到不同的路线/a>
谈论路线是好的,但是实际上如何导航到上述路线?为此,我们可以使用
Routerlink/code>
指示。让我们回去,从前访问我们简单的路由器设置://p>
轮廓模型
。/span>
原始/span>
((/span>
[[//span>
{//span>
小路
:/span>
''/span>
,,,,/span>
零件
:/span>
logincomponent
}//span>
,,,,/span>
{//span>
小路
:/span>
'细节'/span>
,,,,/span>
零件
:/span>
详细信息
}//span>
这是给予的//span>
)/span>
;/span>
现在来自
logincomponent/code>
,我们可以使用以下HTML导航到详细信息。/p>
<//span>
离子头/span>
>//span>
<//span>
离子 - 托利栏/span>
>//span>
<//span>
离子标题/span>
>//span>
登录
//span>
离子标题/span>
>//span>
//span>
离子 - 托利栏/span>
>//span>
//span>
离子头/span>
>//span>
<//span>
离子含量/span>
班级/span>
=//span>
“/span>
离子衬垫
“/span>
>//span>
<//span>
离子巴顿/span>
[Routerlink]/span>
=//span>
“/span>
['/细节']
“/span>
>//span>
详细介绍
//span>
离子巴顿/span>
>//span>
//span>
离子含量/span>
>//span>
这里重要的部分是
离子巴顿/code>
和
Routerlink/code>
指示。Routerlink的作品与典型的想法相似
HREF/code>
s,但是可以将其构建为阵列,而不是将URL构建为字符串,它可以提供更复杂的路径。/p>
我们还可以使用路由器API在应用程序中进行编程导航。/p>
进口/span>
{//span>
零件
}//span>
从/span>
'@angular/core'/span>
;/span>
进口/span>
{//span>
路由器
}//span>
从/span>
'@Angular/Router'/span>
;/span>
@
零件/span>
((/span>
{//span>
.../span>
}//span>
)/span>
出口/span>
班级/span>
logincomponent/span>
{//span>
构造函数/span>
((/span>
私人的/span>
路由器
:/span>
路由器/span>
)/span>
{//span>
}//span>
导航/span>
((/span>
)/span>
{//span>
这个/span>
。/span>
路由器
。/span>
导航/span>
((/span>
[[//span>
'/细节'/span>
这是给予的//span>
)/span>
}//span>
}//span>
两种选项都提供相同的导航机制,仅适合不同的用例。/p>
使用相对URL的导航注释:目前,为了支持多个导航堆栈,相对URL是不支持的。/p>
懒惰的加载路线/a>
现在,我们的路线设置为当前的方式,使其与root App.Module相同的块中包含在同一块中,这不是理想的。相反,路由器具有一个设置,可以将组件隔离到自己的块中。//p>
进口/span>
{//span>
轮廓模型
}//span>
从/span>
'@Angular/Router'/span>
;/span>
@
ngmodule/span>
((/span>
{//span>
进口
:/span>
[[//span>
.../span>
轮廓模型
。/span>
原始/span>
((/span>
[[//span>
{//span>
小路
:/span>
''/span>
,,,,/span>
重定向
:/span>
'登录'/span>
,,,,/span>
路径比
:/span>
'满的'/span>
}//span>
,,,,/span>
{//span>
小路
:/span>
'登录'/span>
,,,,/span>
负载童年/span>
:/span>
((/span>
)/span>
=>/span>
进口/span>
((/span>
'./login/login.module'/span>
)/span>
。/span>
然后/span>
((/span>
m//span>
=>/span>
m
。/span>
loginModule
)/span>
}//span>
,,,,/span>
{//span>
小路
:/span>
'细节'/span>
,,,,/span>
负载童年/span>
:/span>
((/span>
)/span>
=>/span>
进口/span>
((/span>
'./detail/detail.module'/span>
)/span>
。/span>
然后/span>
((/span>
m//span>
=>/span>
m
。/span>
细节模块
)/span>
}//span>
这是给予的//span>
)/span>
这是给予的//span>
,,,,/span>
}//span>
)/span>
虽然相似,但
负载童年/code>
属性是通过使用本机导入而不是直接使用组件来引用模块的一种方法。为了做到这一点,我们需要为每个组件创建一个模块。//p>
.../span>
进口/span>
{//span>
轮廓模型
}//span>
从/span>
'@Angular/Router'/span>
;/span>
进口/span>
{//span>
logincomponent
}//span>
从/span>
'./login.component'/span>
;/span>
@
ngmodule/span>
((/span>
{//span>
进口
:/span>
[[//span>
.../span>
轮廓模型
。/span>
锻造/span>
((/span>
[[//span>
{//span>
小路
:/span>
''/span>
,,,,/span>
零件
:/span>
logincomponent
}//span>
,,,,/span>
这是给予的//span>
)/span>
这是给予的//span>
,,,,/span>
}//span>
)/span>
我们排除了一些其他内容,仅包括必要的零件。/p>
在这里,我们有一个典型的角模块设置以及Routermodule导入,但我们现在正在使用
锻造/code>
并在该设置中声明组件。使用此设置,当我们运行构建时,我们将为应用程序组件,登录组件和详细信息组件生成单独的块。//p>
现场示例/a>
如果您希望掌握上述概念和代码,请查看我们的
现场示例/a>
上面关于Stackblitz的主题。/p>
使用标签/a>
使用TABS,角路由器提供了离子的机制,可以知道应该加载哪些组件,但是繁重的举betway东盟体育app重实际上是由Tabs组件完成的。让我们看一个简单的例子。//p>
const/span>
路线
:/span>
路线
=//span>
[[//span>
{//span>
小路
:/span>
'tabs'/span>
,,,,/span>
零件
:/span>
Tabspage
,,,,/span>
孩子们
:/span>
[[//span>
{//span>
小路
:/span>
'tab1'/span>
,,,,/span>
孩子们
:/span>
[[//span>
{//span>
小路
:/span>
''/span>
,,,,/span>
负载童年/span>
:/span>
((/span>
)/span>
=>/span>
进口/span>
((/span>
'../ tab1/tab1.module'/span>
)/span>
。/span>
然后/span>
((/span>
m//span>
=>/span>
m
。/span>
TAB1PAGEMODULE
)/span>
}//span>
这是给予的//span>
}//span>
,,,,/span>
{//span>
小路
:/span>
''/span>
,,,,/span>
重定向
:/span>
'/tabs/tab1'/span>
,,,,/span>
路径比
:/span>
'满的'/span>
}//span>
这是给予的//span>
}//span>
,,,,/span>
{//span>
小路
:/span>
''/span>
,,,,/span>
重定向
:/span>
'/tabs/tab1'/span>
,,,,/span>
路径比
:/span>
'满的'/span>
}//span>
这是给予的//span>
;/span>
在这里,我们有一个我们加载的“标签”路径。在此示例中,我们称之为路径“选项卡”,但可以更改路径的名称。它们可以称为适合您的应用程序的任何东西。在该路线对象中,我们也可以定义一个子路由。在此示例中,顶级儿童路由“ TAB1”充当我们的“出口”,可以加载其他子路由。在此示例中,我们有一个单个子孩子路由,它只是加载一个新组件。标签的标记如下://p>
<//span>
离子标签/span>
>//span>
<//span>
离子-Tab-bar/span>
投币口/span>
=//span>
“/span>
底部
“/span>
>//span>
<//span>
离子-Tab-Button/span>
标签/span>
=//span>
“/span>
TAB1
“/span>
>//span>
<//span>
离子icon/span>
姓名/span>
=//span>
“/span>
闪光
“/span>
>//span>
//span>
离子icon/span>
>//span>
<//span>
离子标签/span>
>//span>
标签一
//span>
离子标签/span>
>//span>
//span>
离子-Tab-Button/span>
>//span>
//span>
离子-Tab-bar/span>
>//span>
//span>
离子标签/span>
>//span>
如果您以前构建了使用Ionic的应用程序,那么这应该betway东盟体育app会熟悉。我们创建一个
离子标签/code>
组件,并提供
离子-Tab-bar/code>
。这
离子-Tab-bar/code>
提供
离子-Tab-Button/code>
与
标签/code>
与路由器配置中的标签“插座”关联的属性。请注意,最新版本的
@betway东盟体育app离子/角度/code>
不再需要
/code>
,而是允许开发人员完全自定义标签栏,而真实的单一来源生活在路由器配置中。/p>
以前的/div>
生命周期/span>
下一个/div>
config/span>
本指南涵盖了用离子和角度构建的应用程序中路由的工作方式。betway东盟体育app/p>
角路由器是角应用中最重要的库之一。没有它,应用程序将是单个视图/单上下文应用程序,或者无法在浏览器重新加载上维护其导航状态。使用Angular Router,我们可以创建可连接并具有丰富动画的丰富应用程序(当然与Ionic配对)。betway东盟体育app让我们看一下Angular路由器的基础知识以及如何为离子应用程序配置它。betway东盟体育app//p>
一条简单的路线/a>
对于大多数应用程序,通常需要拥有某种路线。最基本的配置看起来有点像这样://p>
进口/span>
{//span>
轮廓模型
}//span>
从/span>
'@Angular/Router'/span>
;/span>
@
ngmodule/span>
((/span>
{//span>
进口
:/span>
[[//span>
.../span>
轮廓模型
。/span>
原始/span>
((/span>
[[//span>
{//span>
小路
:/span>
''/span>
,,,,/span>
零件
:/span>
logincomponent
}//span>
,,,,/span>
{//span>
小路
:/span>
'细节'/span>
,,,,/span>
零件
:/span>
详细信息
}//span>
,,,,/span>
这是给予的//span>
)/span>
这是给予的//span>
,,,,/span>
}//span>
)/span>
我们这里拥有的最简单的细分是路径/组件查找。当我们的应用程序加载时,路由器通过阅读用户试图加载的URL来启动问题。在我们的样本中,我们的路线寻找
为此,我们可以使用路由器重定向。重定向的工作方式与典型的路由对象相同,但仅包含一些不同的键。//p>
在我们的重定向中,我们寻找应用程序的索引路径。然后,如果我们加载它,我们将其重定向到
因为我们使用
和加载
或者,如果我们使用:/p>
然后加载
谈论路线是好的,但是实际上如何导航到上述路线?为此,我们可以使用
现在来自
这里重要的部分是
我们还可以使用路由器API在应用程序中进行编程导航。/p>
两种选项都提供相同的导航机制,仅适合不同的用例。/p>
使用相对URL的导航注释:目前,为了支持多个导航堆栈,相对URL是不支持的。/p>
现在,我们的路线设置为当前的方式,使其与root App.Module相同的块中包含在同一块中,这不是理想的。相反,路由器具有一个设置,可以将组件隔离到自己的块中。//p>
虽然相似,但
我们排除了一些其他内容,仅包括必要的零件。/p>
在这里,我们有一个典型的角模块设置以及Routermodule导入,但我们现在正在使用
如果您希望掌握上述概念和代码,请查看我们的
现场示例/a>
上面关于Stackblitz的主题。/p>
使用TABS,角路由器提供了离子的机制,可以知道应该加载哪些组件,但是繁重的举betway东盟体育app重实际上是由Tabs组件完成的。让我们看一个简单的例子。//p>
在这里,我们有一个我们加载的“标签”路径。在此示例中,我们称之为路径“选项卡”,但可以更改路径的名称。它们可以称为适合您的应用程序的任何东西。在该路线对象中,我们也可以定义一个子路由。在此示例中,顶级儿童路由“ TAB1”充当我们的“出口”,可以加载其他子路由。在此示例中,我们有一个单个子孩子路由,它只是加载一个新组件。标签的标记如下://p>
如果您以前构建了使用Ionic的应用程序,那么这应该betway东盟体育app会熟悉。我们创建一个
''/code>
,从本质上讲,这是我们的索引路线。因此,我们加载了
logincomponent/code>
。非常坦率的。对于我们在路由器配置中拥有的每个条目,这种与组件的匹配路径的模式继续。但是,如果我们想在初始负载上加载不同的路径怎么办?//p>
处理重定向/a>
[[//span>
{//span>
小路
:/span>
''/span>
,,,,/span>
重定向
:/span>
'登录'/span>
,,,,/span>
路径比
:/span>
'满的'/span>
}//span>
,,,,/span>
{//span>
小路
:/span>
'登录'/span>
,,,,/span>
零件
:/span>
logincomponent
}//span>
,,,,/span>
{//span>
小路
:/span>
'细节'/span>
,,,,/span>
零件
:/span>
详细信息
}//span>
这是给予的//span>
;/span>
登录/code>
路线。最后的关键
路径比/code>
需要告诉路由器如何查找路径。/p>
满的/code>
,我们告诉路由器,即使最终成为类似的东西,我们也应该比较完整的道路
/Route1/Route2/Route3/code>
。意味着如果我们有://p>
{//span>
小路
:/span>
'/oute1/oute2/oute3'/span>
,,,,/span>
重定向
:/span>
'登录'/span>
,,,,/span>
路径比
:/span>
'满的'/span>
}//span>
,,,,/span>
{//span>
小路
:/span>
'登录'/span>
,,,,/span>
零件
:/span>
logincomponent
}//span>
,,,,/span>
/Route1/Route2/Route3/code>
我们将重定向。但是如果我们加载了
/Route1/Route2/Route4/code>
,我们不会重定向,因为路径不完全匹配。/p>
{//span>
小路
:/span>
'/oute1/oute2'/span>
,,,,/span>
重定向
:/span>
'登录'/span>
,,,,/span>
路径比
:/span>
'字首'/span>
}//span>
,,,,/span>
{//span>
小路
:/span>
'登录'/span>
,,,,/span>
零件
:/span>
logincomponent
}//span>
,,,,/span>
/Route1/Route2/Route3/code>
和
/Route1/Route2/Route4/code>
,我们将重定向两种路线。这是因为
路径:“前缀”/code>
仅匹配路径的一部分。/p>
导航到不同的路线/a>
Routerlink/code>
指示。让我们回去,从前访问我们简单的路由器设置://p>
轮廓模型
。/span>
原始/span>
((/span>
[[//span>
{//span>
小路
:/span>
''/span>
,,,,/span>
零件
:/span>
logincomponent
}//span>
,,,,/span>
{//span>
小路
:/span>
'细节'/span>
,,,,/span>
零件
:/span>
详细信息
}//span>
这是给予的//span>
)/span>
;/span>
logincomponent/code>
,我们可以使用以下HTML导航到详细信息。/p>
<//span>
离子头/span>
>//span>
<//span>
离子 - 托利栏/span>
>//span>
<//span>
离子标题/span>
>//span>
登录
//span>
离子标题/span>
>//span>
//span>
离子 - 托利栏/span>
>//span>
//span>
离子头/span>
>//span>
<//span>
离子含量/span>
班级/span>
=//span>
“/span>
离子衬垫
“/span>
>//span>
<//span>
离子巴顿/span>
[Routerlink]/span>
=//span>
“/span>
['/细节']
“/span>
>//span>
详细介绍
//span>
离子巴顿/span>
>//span>
//span>
离子含量/span>
>//span>
离子巴顿/code>
和
Routerlink/code>
指示。Routerlink的作品与典型的想法相似
HREF/code>
s,但是可以将其构建为阵列,而不是将URL构建为字符串,它可以提供更复杂的路径。/p>
进口/span>
{//span>
零件
}//span>
从/span>
'@angular/core'/span>
;/span>
进口/span>
{//span>
路由器
}//span>
从/span>
'@Angular/Router'/span>
;/span>
@
零件/span>
((/span>
{//span>
.../span>
}//span>
)/span>
出口/span>
班级/span>
logincomponent/span>
{//span>
构造函数/span>
((/span>
私人的/span>
路由器
:/span>
路由器/span>
)/span>
{//span>
}//span>
导航/span>
((/span>
)/span>
{//span>
这个/span>
。/span>
路由器
。/span>
导航/span>
((/span>
[[//span>
'/细节'/span>
这是给予的//span>
)/span>
}//span>
}//span>
懒惰的加载路线/a>
进口/span>
{//span>
轮廓模型
}//span>
从/span>
'@Angular/Router'/span>
;/span>
@
ngmodule/span>
((/span>
{//span>
进口
:/span>
[[//span>
.../span>
轮廓模型
。/span>
原始/span>
((/span>
[[//span>
{//span>
小路
:/span>
''/span>
,,,,/span>
重定向
:/span>
'登录'/span>
,,,,/span>
路径比
:/span>
'满的'/span>
}//span>
,,,,/span>
{//span>
小路
:/span>
'登录'/span>
,,,,/span>
负载童年/span>
:/span>
((/span>
)/span>
=>/span>
进口/span>
((/span>
'./login/login.module'/span>
)/span>
。/span>
然后/span>
((/span>
m//span>
=>/span>
m
。/span>
loginModule
)/span>
}//span>
,,,,/span>
{//span>
小路
:/span>
'细节'/span>
,,,,/span>
负载童年/span>
:/span>
((/span>
)/span>
=>/span>
进口/span>
((/span>
'./detail/detail.module'/span>
)/span>
。/span>
然后/span>
((/span>
m//span>
=>/span>
m
。/span>
细节模块
)/span>
}//span>
这是给予的//span>
)/span>
这是给予的//span>
,,,,/span>
}//span>
)/span>
负载童年/code>
属性是通过使用本机导入而不是直接使用组件来引用模块的一种方法。为了做到这一点,我们需要为每个组件创建一个模块。//p>
.../span>
进口/span>
{//span>
轮廓模型
}//span>
从/span>
'@Angular/Router'/span>
;/span>
进口/span>
{//span>
logincomponent
}//span>
从/span>
'./login.component'/span>
;/span>
@
ngmodule/span>
((/span>
{//span>
进口
:/span>
[[//span>
.../span>
轮廓模型
。/span>
锻造/span>
((/span>
[[//span>
{//span>
小路
:/span>
''/span>
,,,,/span>
零件
:/span>
logincomponent
}//span>
,,,,/span>
这是给予的//span>
)/span>
这是给予的//span>
,,,,/span>
}//span>
)/span>
锻造/code>
并在该设置中声明组件。使用此设置,当我们运行构建时,我们将为应用程序组件,登录组件和详细信息组件生成单独的块。//p>
现场示例/a>
使用标签/a>
const/span>
路线
:/span>
路线
=//span>
[[//span>
{//span>
小路
:/span>
'tabs'/span>
,,,,/span>
零件
:/span>
Tabspage
,,,,/span>
孩子们
:/span>
[[//span>
{//span>
小路
:/span>
'tab1'/span>
,,,,/span>
孩子们
:/span>
[[//span>
{//span>
小路
:/span>
''/span>
,,,,/span>
负载童年/span>
:/span>
((/span>
)/span>
=>/span>
进口/span>
((/span>
'../ tab1/tab1.module'/span>
)/span>
。/span>
然后/span>
((/span>
m//span>
=>/span>
m
。/span>
TAB1PAGEMODULE
)/span>
}//span>
这是给予的//span>
}//span>
,,,,/span>
{//span>
小路
:/span>
''/span>
,,,,/span>
重定向
:/span>
'/tabs/tab1'/span>
,,,,/span>
路径比
:/span>
'满的'/span>
}//span>
这是给予的//span>
}//span>
,,,,/span>
{//span>
小路
:/span>
''/span>
,,,,/span>
重定向
:/span>
'/tabs/tab1'/span>
,,,,/span>
路径比
:/span>
'满的'/span>
}//span>
这是给予的//span>
;/span>
<//span>
离子标签/span>
>//span>
<//span>
离子-Tab-bar/span>
投币口/span>
=//span>
“/span>
底部
“/span>
>//span>
<//span>
离子-Tab-Button/span>
标签/span>
=//span>
“/span>
TAB1
“/span>
>//span>
<//span>
离子icon/span>
姓名/span>
=//span>
“/span>
闪光
“/span>
>//span>
//span>
离子icon/span>
>//span>
<//span>
离子标签/span>
>//span>
标签一
//span>
离子标签/span>
>//span>
//span>
离子-Tab-Button/span>
>//span>
//span>
离子-Tab-bar/span>
>//span>
//span>
离子标签/span>
>//span>
离子标签/code>
组件,并提供
离子-Tab-bar/code>
。这
离子-Tab-bar/code>
提供
离子-Tab-Button/code>
与
标签/code>
与路由器配置中的标签“插座”关联的属性。请注意,最新版本的
@betway东盟体育app离子/角度/code>
不再需要