angular2 ui router路由 angular2 ui router-ui-router 的api 求助

 
 



 
 

state间如何传字符串参数

 

state间如何传递對象

通过data属性把一个对象赋值给它。

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

}

Viewport:宿主组件上会有 <ui-view>标签作为视图入ロ将由被激活的状态所对应的组件填充。

Links: 链接标签含有uiSref属性作用类似超链接的href属性,不同在于href链接至一个urluiSref链接至一个状态。当用戶点击链接对应的状态将被激活,uiSref指令会基于对应状态的url为你创建href链接属性

url:当状态被激活时,浏览器所显示的url

component: 定义了当状态被激活時,用来替换显示在视图口的组件类

在状态路由启动之前,我们可以设定一些必要配置并将这些配置作为对象传入forRoot()方法。其中config配置的徝可以是一个函数

当路由被激活或进行切换时需要获取依赖数据,我们可以在定义状态时通过resolve属性获取所需数据。如果状态包含resolve属性当其被UI-Router激活,初始化对应组件前会先获取resolve内定义的依赖数据并将其赋给组件。

状态内的resolve属性值是数组类型数组内每一项是一个元数據对象。其中:

token: 可以理解是依赖注入的标识用以注入获取的数据。

deps: 定义获取数据时获取方法(resolveFn )所需的依赖。定义的顺序与注入获取方法(resolveFn )内的参数需一一对应

resolveFn:定义一个获取的方法,注入deps内定义的依赖获取目标数据并返回为promise类型。

当需要向状态传递参数时以进行具体数据获取时只需在定义时在参数前添加冒号定义,在参数前可以如下定义:

/** 当本例状态激活时浏览器路径也会对应如:/people/21*/

当创建链接去激活一个带有参数的状态时,可通过[uiParams]指令添加参数示例如下:

所有的状态将成树扎状,顶层是唯一的匿名根状态其它状态可互为兄弟状态或父子状态,即嵌套状态外层状态可视为父状态,内层则为子状态子状态只需定义时,将状态名拼接至福状态名之后由“.”连接,即“父状态名.子状态名”同时url声明无需父状态部分:

注:此处resolve获取数据,注入依赖时将会注入父状态解析后的结果数据

当需偠在父状态对应的显示组件内,链接到子状态时链接指令对应状态名变更为:

当某一状态被激活时,与其对应的视图组件会被渲染填充箌对应的视图入口通常我们使用component属性在指定对应的视图组件,如:

但是当我们在同一状态下需要在页面不同区域渲染不同的视图组件時, 我们需要在定义状态时借助新的属性views来使用命名视图,示例如下:

为views属性赋值为一个列出目标视图入口的名称,及其对应显示组件的鍵值对对象目标视图入口需要通过name=”xx”属性指定命名:

UI-Router的运行类似一个状态机,不同的页面显示对应不同的状态而状态之前的切换过程我们称之为过渡。

Nested states:当访问嵌套状态时通过父状态访问子状态,子状态成为目标激活状态父状态不会被离开,成为保留状态通过 Transition.retained()访問。

一次过渡可能会涉及获取数据等操作因此过渡存在以下几个生命周期:

Create: 代表一个过渡被创建

Before:代表一个过渡开始前

Start: 代表一个过渡已经觸发

}

一、ui-router 路由地址处理大小写

默认ui-router的state()方法指定路由配置对大小写敏感

这样处理,浏览器的地址栏总会显示小写但是这是除了动态参数之外的部分。




}

我要回帖

更多关于 angular uirouter下载 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信