Angular2(RC4)路由与导航详解资源-CSDN文库

56 浏览量 2020-11-23 03:52:05 上传评论收藏 53KB PDF 举报

基础知识 1.<base href> 大多数带路由的应用都要在 index.html 的 <head>标签下添加一个 <base>元素。 2.导入路由库 import { ROUTER_DIRECTIVES } from ‘@angular/router’; 3.配置首选方案是用带“路由数组”的provideRouter工厂函数（[provideRouter(routes)]）来启动此应用。 app.routes.ts import { provideRouter, RouterConfig } from '@angular/router'; const routes: Router 在Angular2 (RC4)中，路由和导航是构建单页面应用程序（SPA）的核心功能，它们使得用户可以在不刷新整个页面的情况下切换不同的视图。以下是对这些知识点的详细解释： 1. **<base href>**: 在`index.html`的`<head>`标签中添加`<base href="/">`至关重要，因为它为相对URL提供基础路径，对于路由系统正确解析和生成URL至关重要。没有它，路由可能无法正常工作。 2. **导入路由库**: 首先需要导入`@angular/router`库中的`ROUTER_DIRECTIVES`，它是Angular路由模块提供的指令集合，包含`RouterLink`、`RouterOutlet`等关键组件。 3. **配置路由**: 在`app.routes.ts`中，使用`provideRouter`工厂函数创建路由配置。`RouterConfig`是一个路由数组，定义了各个路由路径及其对应的组件。例如，`path: 'crisis-center'`与`CrisisCenterComponent`关联，`path: 'hero/:id'`则是一个带参数的路由，`:id`是动态参数。 4. **RouterConfig**: 路由配置数组定义了路由的路径、组件和可能的路由参数。每个路由对象都包含`path`（路径）、`component`（组件）和其他可选属性，如`data`、`resolve`等。 5. **<router-outlet>**: 这是路由输出点，位于组件模板中，用于呈现由路由器选择的组件。当URL变化时，路由器会在`<router-outlet>`中插入相应的组件。 6. **[routerLink]**: 这个指令用于在HTML元素上创建链接，将URL路径与组件视图关联起来。它允许用户点击后触发导航，无需使用JavaScript。`routerLinkActive`指令则用于在链接被激活时添加CSS类，提供视觉反馈。 7. **路由器状态**: 路由器维护一个`ActivatedRoute`树，表示当前的导航状态。`Router`服务提供了`routerState`属性，可以用来获取当前的`RouterState`，这对于获取当前路由信息、子路由信息以及动态路由参数非常有用。 8. **ROUTER_DIRECTIVES**: 这是Angular路由模块提供的一个指令集，包含`RouterLink`、`RouterLinkActive`和`RouterOutlet`等。在组件模板中使用这些指令时，需要在模块的`directives`属性中引入`ROUTER_DIRECTIVES`。 9. **注册路由器提供商**: 在`main.ts`中，通过`bootstrap`函数注册`appRouterProviders`数组，这样在应用启动时，路由器就能被正确注入并使用。通过以上步骤，Angular2 (RC4)中的路由和导航功能就得以实现，使得用户在应用中可以平滑地从一个视图切换到另一个视图，而无需重新加载整个页面。这种分层的路由结构使得大型应用的管理变得更加有序和高效。

资源推荐

资源评论