【前端】11.Angular 中的路由

参考视频：
https://www.bilibili.com/video/av50917863?p=13
https://www.bilibili.com/video/av50917863?p=14
https://www.bilibili.com/video/av50917863?p=15

Angular8视频教程-IT营配套笔记如下（参考自大地老师）：

一、Angular 创建一个默认带路由的项目

1. 命令创建项目

  ng new angualrdemo08 --skip-install

2. 创建需要的组件

  ng g component home
  ng g component news
  ng g component newscontent

3. 找到 app-routing.module.ts

• 引入组件

 import { HomeComponent } from './home/home.component';
 import { NewsComponent } from './news/news.component';
 import { NewscontentComponent } from './newscontent/newscontent.component';

• 配置路由

 const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'news', component: NewsComponent},
  {path: 'newscontent/:id', component: NewscontentComponent},
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
}
];

4. 找到 app.component.html 根组件模板 ，配置 router-outlet

<h1>
    <a [routerLink]="[ '/home' ]" >首页</a>
    <a [routerLink]="[ '/news' ]" >新闻页面</a>
</h1>
<router-outlet></router-outlet> 

二 、Angular routerLink 跳转页面 默认路由

    <a [routerLink]="[ '/home' ]" >首页</a>
    <a [routerLink]="[ '/news' ]" >新闻页面</a>

//匹配不到路由的时候加载的组件 或者跳转的路由
{
   path: '**', /*任意的路由*/
   // component:HomeComponent
   redirectTo:'home'
}

三、Angular routerLinkActive 设置routerLink 默认选中路由

<h1>
    <a routerLink="/home" routerLinkActive="active">首页</a>
    <a routerLink="/news" routerLinkActive="active">新闻</a>
</h1>

<h1>
   <a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a>
   <a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a>
</h1>

.active{
   color:red;
}

四 、动态路由

1.配置动态路由

const routes: Routes = [
   {path: 'home', component: HomeComponent},
   {path: 'news', component: NewsComponent},
   {path: 'newscontent/:id', component: NewscontentComponent},
   {
      path: '',
      redirectTo: '/home',
      pathMatch: 'full'
}
];

2.跳转传值（理不明白的话看视频更好理解）

  <a [routerLink]="[ '/newscontent/',aid]">跳转到详情</a>
  <a routerLink="/newscontent/{{aid}}">跳转到详情</a>

3.获取动态路由的值

  import { ActivatedRoute} from '@angular/router';

constructor( private route: ActivatedRoute) {
}

ngOnInit() {
  console.log(this.route.params);
  this.route.params.subscribe(data=>this.id=data.id);
}

五 、 动态路由的 js 跳转

1. 引入

  import { Router } from '@angular/router';

2.初始化

export class HomeComponent implements OnInit {
  constructor(private router: Router) {
  }
  ngOnInit() {
  }
  goNews(){
    // this.router.navigate(['/news', hero.id]);
    this.router.navigate(['/news']);
 }
}

3.路由跳转

  this.router.navigate(['/news', hero.id]);

六 、路由 get 传值 js 跳转

1. 引入 NavigationExtras

  import { Router ,NavigationExtras} from '@angular/router';

2. 定义一个 goNewsContent 方法执行跳转 ，用 用 NavigationExtras 配置传参 。

goNewsContent(){
  let navigationExtras: NavigationExtras = {
       queryParams: { 'session_id': '123' },
      fragment: 'anchor'
  };
  this.router.navigate(['/news'],navigationExtras);
}

3. 获取 get 传值

constructor(private route: ActivatedRoute) {
   console.log(this.route.queryParams);
}

七、父子路由

1. 创建组件引入组件

  import { NewsaddComponent } from './components/newsadd/newsadd.component';
  import { NewslistComponent } from './components/newslist/newslist.component';

2. 配置路由

{
  path: 'news',
  component:NewsComponent,
  children: [
  {
      path:'newslist',
     component:NewslistComponent
},
{
   path:'newsadd',
   component:NewsaddComponent
}
]
}

3. 父组件中定义 router-outlet

  <router-outlet></router-outlet>

八、学习视频中的相关知识点积累：

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。