网站建哪家好,东莞轻推网络公司,技术支持 淄博网站建设,爱最好网站建设Angular2中建立路由的4个步骤#xff1a; 1、路由配置#xff1a;最好新建一个app.toutes.ts文件#xff08;能不能用ng命令新建有待调查#xff09; Angular2中路由要解决的是URL与页面的对应关系#xff08;比如URL是http://localhost:4200/all-people#xff0c;那么页…Angular2中建立路由的4个步骤 1、路由配置最好新建一个app.toutes.ts文件能不能用ng命令新建有待调查 Angular2中路由要解决的是URL与页面的对应关系比如URL是http://localhost:4200/all-people那么页面显示的就应该是allPeople画面URL是http://localhost:4200/first-come页面显示的就应该是firstCome画面。 在Angular2中页面是由组件组成的Angular2中的根模块对应的根组件就表示了整个应用应用也可以说成只有一个组件也就是一个页面这就是单页面应用的由来吧所以路由解决的是URL与组件的对应关系。 这个需要一个数据它用来表示url与组件的对应关系Angular2中把这个数据叫作“路由配置” // 需要从路由模块中引入Routes类
import { Routes } from angular/router;
// 对于需要用url链接的组件需要从文件中导入
import { AllPeopleComponent } from ./all-people/all-people.component;
import { HomePageComponent } from ./home-page/home-page.component;
// export 导出供其他模块导入 这是一个数组数组中没一个元素是一个对象最常见的是这个对象有2个属性分别是path对应url和component对应组件直观上url中输入一个路径在数组中查找path如果有对应的话就在指定区域显示与path对应的组件。
export const rootRouterConfig: Routes [{path: , // http://localhost:4200component: HomePageComponent},{path: all-people, // http://localhost:4200/all-peoplecomponent: AllPeopleComponent},
] 2、在根模块中创建根路由模块。 根路由模块包含了路由所需的使用服务它以路由配置为参数调用RouterModule.forRoot()方法来创建。 这里还有路由策略的问题会在后续再补充 // 在根模块中导入路由配置
import { rootRouterConfig } from ./app.routes; // 注意没有.ts
// 需要调用RouterModule.forRoot()方法
import { RouterModule } from angular/router;// 创建路由模块const rootRouterModule: ModuleWithProviders RouterModule.forRoot(rootRouterConfig); // 根路由模块默认提供的路由策略为PathLocationStrategy另外一个是HashLocationStrategy。
// PathLocationStrategy路由策略需要一个base路径设置base路径有2种方式最简单的是在index.html中设置base // 路由策略pathLocationStrategy // const rootRouterModule: ModuleWithProviders RouterModule.forRoot(rootRouterConfig); // 路由策略HashLocationStrategy // const rootRouterModule: ModuleWithProviders RouterModule.forRoot(rootRouterConfig, {useHash: true}); NgModule({ declarations: [], // 导入路由模块imports: [rootRouterModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { } 3、添加组件存放的区域使用RouterOutlet指令 这个指令就是在页面上预留一个区域当url改变时匹配路由配置中的path匹配成功后就将与path对应的component加载到这个区域里。 一般情况下这个指令是放在根组件中但也会有子组件路由同一父组件的子组件的情况。 section classcontainerrouter-outlet/router-outlet
/section 到目前为止一个简单的路由就基本配置完成了只要在url中输入正确的path就能显示对应的组件。 但是我们总不能跳转页面时还要手动输入url吧我们的理想方法是通过页面的一些操作比如点击事件延迟改变url实现path对应的组件显示这就是路由跳转。 4、路由跳转 如上说的路由跳转就是为了不要手动改变url最常见的就是点击事件改变url实现路由跳转显示组件。 路由跳转有两种方式指令跳转和代码跳转。 指令跳转指的是使用RouterlLink指令该指令接收一个链接参数数组当事件被触发时数组中的所有元素与路由配置中的path接收的数组中的元素进行一一对比全都相等时得以匹配。 RouterLink有一个好的方法可以指定routerLinkActive “className”也就是当RouterLink被激活时可以给相应的html元素添加clas类。神奇地是routerLinkActive可以作用于父级元素。 div idnavbar classcollapse navbar-collapseul classnav navbar-navlia [routerLink][/all-people]allPeople/a/lilia [routerLink][/first-come]firstCome/a/lilia [routerLink][/last-leave]lastLeave/a/lilia [routerLink][/form]newPerson/a/lilia [routerLink][/bugManage]bugManage/a/li/ul/div 需要特别注意的是RouterLink指令仅响应click事件码源分析以后补上要想响应其他比如延迟显示事件就要用到代码跳转。 以上是Angular2中路由的基本用法一些细节和关键的步骤会在后续更新比如URL带参数页面如何取得url的值代码跳转和指令跳转的区别路由策略的区别子路由。。。。。 新手有问题欢迎大家指正。。。 转载于:https://www.cnblogs.com/FireCamp/p/7599119.html
