angular 路由

LeexMuller 发布于2019-08-22 13:51 / 1830人阅读

摘要：从新建项目开始打开找到参数地址组件新建俩个页面试试引入模块配置写在文件里的路由使用方法和类似，只是写法不同。

从新建项目开始 ng new projectName --routing
打开 ../app/app-routing.module.ts
找到 const routes:Routes = [];
routes参数: path:url地址 ,component：组件

新建俩个页面试试

ng generate component page1
ng generate component page2

引入模块：

import { page1Component } from ...;
import { page2Component } from ...;

routes配置: //写在 app-route文件里

[   
{path:"page1",component:Page1Component},
{path:"page2",component:Page2Component}
]

angular的路由使用方法和ui-router类似，只是写法不同。

1.ui-route之ui-sref ：routerLink//链接
用法：page1：

2.ui-route之ui-view : router-outlet//展示div
用法：

3.ui-route之state: Router.navigate()//路由跳转
用法：

constructor(private router: Router)
 this.router.navigate(["/page2"])

4.ui-route之otherwise: path:"**"//路由跳转
用法：{path:"**",component:errorComponent}

angular路由传递参数

1.queryParams

使用方法 ：传入 page1;
接受：constructor(private routeInfo:ActivatedRoute);
      cosole.log(this.routeInfo.snapshot.queryParams["id"])

2.链接

使用方法 ：
routes预先设置需要传入的参数:path:"/page1/:id/:age"
传入 page1;
接受：constructor(private routeInfo:ActivatedRoute);
      cosole.log(this.routeInfo.snapshot.params["age"]);

3.配置

使用方法 ：
routes预先设置需要传入的参数:{path:"page1",data:[{age:5}]}
接受：constructor(private routeInfo:ActivatedRoute);
      cosole.log(this.routeInfo.snapshot.data[0]["age"]);

参数快照snapshot与参数订阅subscribe区别与使用：

如果只是使用一次的话，其实使用snapshot就可以。
subscribe有一点类似于监听$watch。
用法    constructor(private routeInfo:ActivatedRoute);
      this.routeInfo.params.subscribe((data)=>{console.log(data["age"])});

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92516.html

Angular路由导航的7个步骤

摘要：路由过程的个步骤每次点击链接或浏览器改变时，路由器都会确保应用程序做出相应的反应。一旦所有的都已完成，其返回值是合并的路径的然后路由器继续步骤。你可以使用助记记住路由器经过的步骤的顺序。路由过程的7个步骤每次点击链接或浏览器URL改变时，Angular路由器都会确保应用程序做出相应的反应。为了做到这一点，Angular路由器执行以下7个步骤的顺序：解析(Parse)：它解析...

BLUE 2019-08-21 17:41 评论0 收藏0
Angular路由导航的7个步骤

摘要：路由过程的个步骤每次点击链接或浏览器改变时，路由器都会确保应用程序做出相应的反应。一旦所有的都已完成，其返回值是合并的路径的然后路由器继续步骤。你可以使用助记记住路由器经过的步骤的顺序。路由过程的7个步骤每次点击链接或浏览器URL改变时，Angular路由器都会确保应用程序做出相应的反应。为了做到这一点，Angular路由器执行以下7个步骤的顺序：解析(Parse)：它解析...

clasnake 2019-08-06 10:54 评论0 收藏0
Angular路由导航的7个步骤

摘要：路由过程的个步骤每次点击链接或浏览器改变时，路由器都会确保应用程序做出相应的反应。一旦所有的都已完成，其返回值是合并的路径的然后路由器继续步骤。你可以使用助记记住路由器经过的步骤的顺序。路由过程的7个步骤每次点击链接或浏览器URL改变时，Angular路由器都会确保应用程序做出相应的反应。为了做到这一点，Angular路由器执行以下7个步骤的顺序：解析(Parse)：它解析...

YanceyOfficial 2019-08-05 12:23 评论0 收藏0
【CuteJavaScript】Angular6入门项目（1.构建项目和创建路由）

摘要：启动服务，并打开新窗口可简写创建新组件可简写创建新服务创建路由模块其他另外还有很多的命令提供，详细可以查阅官方文档命令。引入路由模块导出路由模块的指令这里需要添加一个数组，并传入，导出让路由器的相关指令可以在中的组件中使用。本文目录一、项目起步二、编写路由组件三、编写页面组件 1.编写单一组件 2.模拟数据 3.编写主从组件四、编写服务 1.为什么需要服务 2....

bergwhite 2019-08-23 15:25 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（四）—angular路由初步

摘要：为了做到这一点，我创建了一个服务提供商，通过的消息推送来实现。最后声明一个来发送修改过的对象。根组件，创建它并插入宿主页面。路由的作用是在找不到任何路由时，访问组件。定义路由数组后，用装饰器导入，并将路由数组传递给的数组。上一篇文章对用户发来的注册和登录信息进行了处理，并实现了将注册用户信息插入到mysql数据库的数据表和从mysql数据库的数据表中查询到用户的登录信息并返回用户认证...

Zhuxy 2019-08-26 11:47 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（四）—angular路由初步

摘要：为了做到这一点，我创建了一个服务提供商，通过的消息推送来实现。最后声明一个来发送修改过的对象。根组件，创建它并插入宿主页面。路由的作用是在找不到任何路由时，访问组件。定义路由数组后，用装饰器导入，并将路由数组传递给的数组。上一篇文章对用户发来的注册和登录信息进行了处理，并实现了将注册用户信息插入到mysql数据库的数据表和从mysql数据库的数据表中查询到用户的登录信息并返回用户认证...

Charlie_Jade 2019-08-05 17:59 评论0 收藏0