angular动态路由配置,angularjs路由

　　如何在Angular中使用路由？本文将带你了解如何在Angular中使用路由，快速上手Angular路由。希望对你有帮助！

　　路由的概念已经在前端框架中广泛使用。不解释路由的感知，路由的应用无非就是嵌套和传递参数。一些高级功能，如延迟加载和预加载，以及一些高级功能，如路由警卫等。让我们来看看如何在Angular中使用路由。【相关教程推荐：《angular教程》】

请按照图中结构来创建我们的项目

　　创建项目一级模块：

　　ng新角度路由器示例

　　ng g c页面/登录

　　ng g c页面/主页

　　ng g c页面/我的

　　注意：通过cli创建的组件将被自动注册。

起步

1. 在App的html模板中配置

　　分

　　a[router link]=[/log in ] log in/a

　　A [routerLink]=[/home]主页/a

　　A [routerLink]=[/mine] My /a

　　/div

　　！-配置路由出口-

　　路由器出口/路由器出口

2. 在App的app-routing中配置路由器

　　最简单的组件路由需要路径(路由的Url)属性和组件(Url对应于加载的组件)属性：

　　const routes: Routes=[

　　{

　　路径：“登录”，

　　组件：LoginComponent，

　　},

　　{

　　路径：“主页”，

　　组件：HomeComponent，

　　},

　　{

　　路径：“我的”，

　　组件：MineComponent，

　　},

　　];当我们不小心访问了一个不存在的Url时，如何配置我们的404页面？

　　const routes: Routes=[

　　.

　　{

　　路径：“**”，

　　组件：NotFountComponent，

　　},

　　];注意：路由器匹配策略是先到先得，所以具体路由配置在后面。

3. 设置有效的默认路由

　　配置的默认路由应高于通用路由。

　　const routes: Routes=[

　　.

　　{路径： ，重定向到：“/home”，路径匹配：“完整”}，

　　.

　　];

配置子模块子路由

1. 为Home组件增加带路由的模块配置

　　进口：[

　　浏览器模块，

　　HomeRoutingModule，

　　合适的模块，

　　]注意：cli创建的模块将被自动配置到根模块，但我们手动调整顺序，将合适的模块移到最后，以满足先到先服务的策略。

2. 将Home组件的路由配置转移到home-routing

　　常量路线：路线=[{

　　路径：“主页”，

　　组件：HomeComponent，

　　}];注意：配置后，您可以在app-routing中删除Home组件的配置。

3. 补充Home组模块的子组件并配置子路由

　　执行以下命令创建子组件。

　　ng g c页面/主页/儿童/用户列表

　　ng g c页面/主页/子页面/用户详细信息

　　ng g c页面/主页/儿童/编辑-用户

　　将子属性添加到家用路由器配置中，以配置子组件路由。

　　const routes: Routes=[{

　　.

　　儿童：[

　　{

　　路径：“列表”，

　　组件：UserListComponent

　　},

　　{

　　路径：“详细信息”，

　　组件：UserDetailComponent，

　　},

　　{

　　路径：“编辑”，

　　组件：EditUserComponent，

　　},

　　{

　　路径： ，

　　重定向到：“/home/list”，

　　路径匹配：“满”

　　}

　　]

　　}];将子模块路由出口配置为根组件。

　　差异

　　a[router link]=[/home/list ] list/a

　　a[router link]=[/home/edit ] edit/a

　　a[router link]=[/home/detail ] Details/a

　　/div

　　！-配置路由出口-

　　router-outlet/router-outlet

路由传参

1. 在路由定义时配置需要携带的参数令牌

　　格式：在路由的配置路径后补充/:key格式的令牌占位符。

　　{

　　路径：详细信息/:id ，

　　组件：UserDetailComponent

　　}注意：id是这种将令牌插入路由路径进行占用的方式中必须携带的参数。

　　参数通过routerLink传送

　　需要[routerlink]= [/hero ，hero.id] ActivatedRoute来获取Angular:

　　1:获取参数(可以监控路由参数的变化，适用于同一组件实例多次复用的情况)

　　this.route.paramMap.subscribe(

　　(params: ParamMap)={

　　console.log(id:，params . get( id ))；

　　}

　　)方法二：获取参数(只获取初始值)

　　const id=this . route . snapshot . param map . get( id )！ParamMap API：

　　如果参数名称在参数列表中，则Description member has(name)返回true。Get(name)如果这个映射中有参数值(string)对应参数名，则返回，否则返回null。如果参数值实际上是一个数组，则返回它的第一个元素。GetAll(name)如果这个map中有与参数名对应的值，则返回一个字符串数组，否则返回一个空数组。当参数名可能对应多个值时，使用getAll。Keys返回此映射中所有参数名称的字符串数组。

2. 通过Router的navigate跳转页面

　　不带参数的跳转：

　　this . router . navigate([/home/list ])；带参数跳转：

　　this . router . navigate([/home/list ，{ id: this.userId，name:this . username }])；注：矩阵URL符号：id=101名称=bom

懒加载

1. 配置无组件路由（空路由）

　　 {

　　路径：“主页”，

　　loadChildren: ()=

　　导入(。/pages/home/home . module’)。然后((m)=m.HomeModule)，

　　}

2. 移除根模块中关于Home模块的导入，使得模块完整分离

　　常量路线：路线=[{

　　路径： ，

　　组件：HomeComponent，

　　儿童：[

　　.

　　]

　　}];Angular中的

3. 与懒加载相对的预加载

　　路由器模块提供两种预加载策略：

　　没有预载，这是默认的。延迟加载的特性区域仍然会按需加载。

　　预加载所有惰性加载的特征区域。

　　修改方法：RouterModule.forRoot()的参数2的对象支持设置加载方式的属性preloadingStrategy，

　　preall modules:preloadall modules。

　　NoPreloading:默认情况下，不执行预加载。

　　这种鸡肋的属性必须支持定制。让我们来看看：

　　向需要预加载的路由配置对象添加数据对象和预加载属性。将该值设置为true意味着开始预加载。

　　通过cli生成一个服务来完成我们的预加载策略：ng生成服务选择性预加载策略。

　　我们创建的服务将实现接口预加载策略。

　　的自定义策略与默认情况下支持的两种策略的用法一致。

　　从“@angular/core”导入{ injective }；

　　从“@angular/router”导入{ PreloadingStrategy，Route }；

　　从“rxjs”导入{ Observable，of }；

　　@可注射({

　　提供了：“根”，

　　})

　　export类selective preloadingstrategyservice实现预加载策略{

　　preloaded modules:string[]=[]；

　　preload(route: Route，fn:()=Observableany):Observableany {

　　//检查路由配置以决定是否预加载。

　　if(route . data route . data . preload route . path！=null) {

　　//参数1:要加载的路径

　　this . preloaded modules . push(route . path)；

　　//参数2: Loader

　　返回fn()；

　　}否则{

　　返回(null)；

　　}

　　}

　　}

结语

　　以上是最近角路由的研究和整理。还有一个路由的守卫没有提到。我们再花点时间整理一下。

　　有关编程的更多信息，请访问：编程入门！这就是Angular中路由的使用方法。更多详情请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。