路由

路由

带路由项目与普通项目的区别

创建了一个app-routing.module.ts ```typescript import { NgModule } from ‘@angular/core’; import { Routes, RouterModule } from ‘@angular/router’;

const routes: Routes = [];

@NgModule({ // 只在根模块AppRoutingModule中调用RouterModule.forRoot()(如果在AppModule中注册应用的顶层路由，那就在AppModule中调用)。 // 在其他模块中，必须调用RouterModule.forChild()方法来注册附属路由 // forRoot()方法会提供路由所需的服务提供者和指令，还会基于浏览器的当前URL执行首次导航 imports: [RouterModule.forRoot(routes)], // 导出RouterModule，以便在整个应用程序中生效 exports: [RouterModule] }) export class AppRoutingModule { }


2.  为不带路由的项目增加路由模块： 
> --flat 把这个文件放进了 src/app中，而不是单独的目录中。
>  
> --module=app 告诉CLI把它注册到AppModule的imports数组中
```shell
ng g module app-routing --flat --module=app

然后将路由的符号导入、编写路由；
接着声明@NgModule的imports和exports

在app.module.ts里加入app-routing模块 ```typescript import { BrowserModule } from ‘@angular/platform-browser’; import { NgModule } from ‘@angular/core’;

import { AppRoutingModule } from ‘./app-routing.module’;

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }


4.  app.component.html里添加了`<router-outlet>`标签 
> router-outlet标签为路由出口，会告诉路由器要在哪里显示路由的视图。
>  
> 能在AppComponent中使用RouterOutlet，是因为AppModule导入了AppRoutingModule，而AppRoutingModule中导出了RouterModule。
```html
<!-- 其他内容可删除 -->
<router-outlet></router-outlet>

路由配置

路由模块不是必须的，也可以直接在需要使用路由的模块内编写路由。
例如，在app.module.ts中加入路由： ```typescript const appRoutes: Routes = [ // 路由配置 ];

@NgModule({ imports: [ RouterModule.forRoot( appRoutes, { enableTracing: true } // 会把每个导航生命周期中的事件输出到浏览器的控制台，这应该只用于调试 ) // other imports here ], … }) export class AppModule { }


2.  在路由模块中添加路由 
```typescript
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// 在路由模块引入需要配置的组件
import { HomeComponent } from './components/home/home.component';
import { NewsComponent } from './components/news/news.component';
import { ProductComponent } from './components/product/product.component';
// 路由的配置顺序：具体路由应该放在通用路由前。因为路由器使用先匹配者优先的策略来匹配路由
const routes: Routes = [
  {
    path: 'home',   // 跳转路径,前面不加斜杠
    component: HomeComponent  // 路径/home跳转的组件
  },
  {
    path: 'news',
    component: NewsComponent
  },
  {
    path: 'product',
    component: ProductComponent
  },
  {
    path: '**',  // 前面路由都匹配不到时，使用该组件，一般用于配置跳转404页面或跳转至首页
    redirectTo: 'home'  // 跳转至path:'home'的组件
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

编写app.component.html

<h2>根组件</h2>
<!-- router-outlet会展示跳转的组件内容 -->
<router-outlet></router-outlet>

在地址栏输入http://localhost:4200/home，便会在 <router-outlet> 标签的位置显示HomeComponent组件的内容。

使用routerLink自动跳转

在app.component.html添加一个带有routerLink的a标签，routerLink内为跳转地址： ```html
根组件

<br />编写一个简单的less导航样式：  
2.  使用routerLinkActive为选中的routerLink添加选中样式。routerLinkActive内容为选中该routerLink后执行的css的class名称，该名称可以自定义 
```html
<h2>根组件</h2>
<header class='header'>
  <a [routerLink]="[ '/home' ]" routerLinkActive="aaa">首页</a>
  <a [routerLink]="[ '/news' ]" routerLinkActive="aaa">新闻</a>
  <a [routerLink]="[ '/product' ]" routerLinkActive="aaa">商品</a>
</header>
<router-outlet></router-outlet>

在less中添加.aaa样式

前端笔记

15-路由配置

路由

带路由项目与普通项目的区别

路由配置

使用routerLink自动跳转

根组件