commit

src/app/app-routing.module.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 16:21:23
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 10:52:56
+ * @LastEditTime: 2022-03-09 14:00:45
  */
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
@@ -20,6 +20,11 @@ const routes: Routes = [
     path: "user",
     component: UserComponent,
   },
+  // 匹配不到路由时加载的组件或者跳转的路由
+  {
+    path: "**",
+    redirectTo: "",
+  },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 16:21:23
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 11:39:39
+ * @LastEditTime: 2022-03-09 13:41:44
  */
 // 引入核心模块
 import { NgModule } from "@angular/core";

src/app/model/public.module.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-09 11:13:29
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 11:40:26
+ * @LastEditTime: 2022-03-09 13:39:27
  */
 import { NgModule } from "@angular/core";
 import { AppRoutingModule } from "../app-routing.module";
@@ -12,9 +12,10 @@ import { ComponentsModule } from "src/app/components/components.module";
 import { CommonModule } from "@angular/common";
 // 引入双向数据绑定
 import { FormsModule } from "@angular/forms";
+
 @NgModule({
   declarations: [],
-  imports: [AppRoutingModule, ComponentsModule, FormsModule, CommonModule],
+  imports: [],
   exports: [AppRoutingModule, ComponentsModule, FormsModule, CommonModule],
 })
 export class PublicModule {}

src/app/pages/home/home.component.html

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:06:15
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 10:55:03
+ * @LastEditTime: 2022-03-09 14:01:40
 -->
 <app-head></app-head>
 <hr />
@@ -15,10 +15,14 @@
 </div>
 <app-body></app-body>
 <div class="root">
-  <a routerLink="/user">跳转</a>
+  <a routerLink="" routerLinkActive="active">跳转回主页</a>
+
+  <a routerLink="/user" routerLinkActive="active" [queryParams]="{ aid: key }"
+    >跳转</a
+  >
   <!-- <a >跳转到用户页面</a> -->
   <!-- <a ></a> -->
   <!-- <a [routerLink]="['/user']"></a> -->
 </div>
 <!-- <app-news></app-news> -->
-<!-- <app-list></app-list> -->
+<app-list></app-list>

src/app/pages/home/home.component.ts

@@ -4,12 +4,13 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:06:15
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-08 14:38:05
+ * @LastEditTime: 2022-03-09 13:47:01
  */
 import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
 import { RequestService } from "src/app/services/request.service";
 // 引入服务
 import { StorageService } from "src/app/services/storage.service";
+import { ActivatedRoute } from "@angular/router";
 @Component({
   selector: "app-home",
   templateUrl: "./home.component.html",
@@ -18,7 +19,12 @@ import { StorageService } from "src/app/services/storage.service";
 export class HomeComponent implements OnInit {
   @ViewChild("homeHead", { static: true }) homeHead: any;
   public result: any = "";
-  constructor(public storage: StorageService, public request: RequestService) {}
+  public key: string = "123";
+  constructor(
+    public storage: StorageService,
+    public request: RequestService,
+    public route: ActivatedRoute
+  ) {}
   // init结尾的函数只会调用一次 checked结尾的函数会多次调用
   // 初始化组件和指令时调用(一般用于请求api)
   ngOnInit(): void {

src/app/pages/home/home.module.ts

@@ -4,13 +4,14 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:06:01
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 11:54:23
+ * @LastEditTime: 2022-03-09 13:39:03
  */
 import { NgModule } from "@angular/core";
 import { HomeComponent } from "./home.component";
 import { HeadComponent } from "./components/head/head.component";
 import { BodyComponent } from "./components/body/body.component";
 import { PublicModule } from "src/app/model/public.module";
+
 @NgModule({
   declarations: [HomeComponent, HeadComponent, BodyComponent],
   imports: [PublicModule],

src/app/pages/user/user.component.html

@@ -4,13 +4,15 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-04 10:45:56
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 10:56:33
+ * @LastEditTime: 2022-03-09 13:23:58
 -->
 <p>user works!</p>
 <app-info></app-info>
 <app-mine></app-mine>
 <div class="root">
-  <a routerLink="/">跳转回主页</a>
+  <a routerLink="" routerLinkActive="active">跳转回主页</a>
+
+  <a routerLink="/user" routerLinkActive="active">跳转</a>
   <button (click)="getApiData()">get请求数据</button>
   <button (click)="postUserData()">post增加数据</button>
   <ul>

src/app/pages/user/user.component.ts

@@ -4,20 +4,33 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-04 10:45:56
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-08 17:32:59
+ * @LastEditTime: 2022-03-09 13:59:01
  */
 import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
 import { AxiosService } from "src/app/services/axios.service";
 import { RequestService } from "src/app/services/request.service";
+
 @Component({
   selector: "app-user",
   templateUrl: "./user.component.html",
   styleUrls: ["./user.component.scss"],
 })
 export class UserComponent implements OnInit {
-  constructor(public httpApi: RequestService, public axiosApi: AxiosService) {}
+  constructor(
+    public httpApi: RequestService,
+    public axiosApi: AxiosService,
+    public route: ActivatedRoute
+  ) {}
   public list: any;
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.route.queryParams.subscribe((params) => {
+      console.log("路由传过来的参数", params);
+    });
+    // this.route.params.subscribe((params) => {
+    //   console.log("动态路由路径", params);
+    // });
+  }
   // async getApiData() {
   //   try {
   //     let res: any = await this.httpApi.getRequest();

src/app/pages/user/user.module.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-04 10:42:33
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 11:56:39
+ * @LastEditTime: 2022-03-09 13:38:45
  */
 import { NgModule } from "@angular/core";
 import { InfoComponent } from "./components/info/info.component";

src/styles.scss

@@ -4,3 +4,6 @@
   margin: 0;
   padding: 0;
 }
+.active {
+  color: red;
+}