Angular项目实战CORE06课件.pptx

项目六

--智慧工厂气报表模块;;;;情景导入;基本框架;;;;;在app.module.ts文件中，从@angular/router库中入?RouterModule;（1）使用RouterModule.forRoot()来为应用程序提供使用路由必需的依赖RouterModule?对象提供了两个静态的方法forRoot()?、?forChild()?

（2）配置路由需要用到Routers数组，数组的每一个元素即为一个路由配置项

path（path不能用斜线开头）属性定义路由的匹配路径

component?属性定义路由匹配时需要加载的组件;RouterOutlet指令是用来标记路由显示视图的位置，指定在页面的哪一位置渲染路由的内容。

router-outlet/router-outlet

//此处呈现component;使用routerLink指令。当在标签上绑定routerLink指令，用户通过点击标签，来进行导航

ul

lia[routerLink]=[home]Home/a/li

lia[routerLink]=[about]About/a/li

/ul

;;（1）在HTML模板中添加属性[queryParams]，使其携带参数

（2）在ts文件中，创建变量来接收传递过来的参数，使用ActivatedRoute服务保存当前路由的信息，并使用参数快照（snapshot属性）接收路由传递过来的参数;（1）在app-routing.module.ts中修改path属性值使其携带参数

（2）在HTML模板添加传递参数

（3）使用参数快照（snapshot属性）获取参数值;主要作用是当访问一个特定地址时，将其重定向到另一个指定的地址。

重定向路由的配置如下：

{path:要定向的路径,redirectTo:要定向到的目标路由，pathMatch:匹配方式};子路由是嵌套在主路由里，由children表明这是子路由且可以无限循环嵌套。;（1）在主路由的插座定义一个辅助路由插座。

添加一个name属性用来指定辅助路由显示的组件

（2）配置入口参数。

添加outlets属性，该对象里面传入上述的name属性值

（3）配置辅助路由路径。

添加outlet属性，指定该路由显示在对应名称的路由插座上;允许从一个页面跳转到另一个页面时执行一些指定的逻辑，并根据执行的结果来决定是否跳转。;;;;;;;