angular js 默认选中_【Angular】路由routerLink

路由配置和路由跳转示例

1.创建好项目后，创建以下示例组件：

ng g component components/home
ng g component components/news

2.找到 app-routing.module.ts 配置路由

//引入组件
import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';

3.配置路由

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';
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'news', component: NewsComponent },
  // 下面是默认路由
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 找到app.component.html 根组件模板，配置 router-outlet 显示动态加载的路由

<div >

  <h1>
    
    {{ msg }}
  h1>

  <app-header #headerChild>app-header>
  <h1>
    <a routerLink="/home" routerLinkActive="active">首页a>        
    <a routerLink="/news" routerLinkActive="active">新闻a>
  h1>
<router-outlet>router-outlet>

说明：Angular routerLinkActive 设置 routerLink 默认选中路由样式

将样式配置到全局样式src.style.scss中：

/* You can add global styles to this file, and also import other style files */
.active{
    color:red;
}

运行效果，效果：

动态路由的使用

1，再创建一个详情组件

ng g component components/detail

2.配置路由

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 { DetailComponent } from './components/detail/detail.component';
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'news', component: NewsComponent },
  { path: 'detail/:id', component: DetailComponent },
  // 下面是默认路由
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3.跳转传值

news.component.html

<p>我是新闻组件p>
<a [routerLink]="[ '/detail/',aid]">跳转到详情a> 
<a routerLink="/detail/{{aid}}">跳转到详情a>

news.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
  aid = "news4200"
  constructor() { }

  ngOnInit(): void {
  }

}

获取动态路由的值：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute} from '@angular/router';
@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
export class DetailComponent implements OnInit {

  constructor( private route: ActivatedRoute) { }
  id;
  ngOnInit(): void {
    console.log(this.route.params);
    this.route.params.subscribe(data=>this.id=data.id);
  }


}

运行项目，点击新闻中，跳转到详情按钮：

动态路由的 js 跳转

1.引入

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

2.初始化

constructor(private router: Router) {
}

3.路由跳转

// this.router.navigate(['/detail']);//不传值
this.router.navigate(['/detail',"56465"]);//传值

示例：

news.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
  aid = "news4200"
  constructor(private router: Router) { }

  ngOnInit(): void {
  }
  goDetail(){
     this.router.navigate(['/detail',"56465"]);
  }
}

news.component.html

<button (click)='goDetail()'>跳转到详情button>

运行项目，效果：

NavigationExtras传值 js 跳转

1、路由配置

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 { DetailComponent } from './components/detail/detail.component';
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'news', component: NewsComponent },
  { path: 'detail', component: DetailComponent },
  // 下面是默认路由
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2.跳转传值

news.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {
  }
  goDetail() {
    let navigationExtras: NavigationExtras = {
      queryParams: { 'id': '8888' },
    };
    this.router.navigate(['/detail'], navigationExtras);
  }
}

news.component.html

<p>我是新闻组件p>


<button (click)='goDetail()'>跳转到详情button>

3.获取值

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute} from '@angular/router';
@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
export class DetailComponent implements OnInit {

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


}

4.运行项目

父子路由

1.创建子组件

ng g component components/newsadd
ng g component components/newslist

2.引入组件，配置路由

app-routing.module.ts

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 { DetailComponent } from './components/detail/detail.component';
import { NewaddComponent } from './components/newadd/newadd.component';
import { NewslistComponent } from './components/newslist/newslist.component';
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: 'news', component: NewsComponent,
    children: [
      {
        path: 'newslist',
        component: NewslistComponent
      }, {
        path: 'newsadd',
        component: NewaddComponent
      }]
  },
  { path: 'detail', component: DetailComponent },
  // 下面是默认路由
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3.父组件定义：

示例

<p>我是新闻组件p>


<div class="content">

    <div class="left">
  
 
        <a [routerLink]="[ '/news/newsadd']" routerLinkActive="active">   新闻添加a>
        <br>

        <br>
        <a [routerLink]="[ '/news/newslist']" routerLinkActive="active">   新闻列表a>
  
    div>
  
    <div class="right">
  
      <router-outlet>router-outlet>
  
    div>
  
  div>

运行项目，效果：

完

  码上加油站

  一起来加油

长按扫码关注

记得点个 赞 和 在看 哦！