commit

src/app/app.module.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 16:21:23
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-04 15:49:55
+ * @LastEditTime: 2022-03-08 10:53:14
  */
 // 引入核心模块
 import { NgModule } from "@angular/core";

src/app/components/list/list.component.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-04 10:47:32
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 15:13:23
+ * @LastEditTime: 2022-03-07 16:48:12
  */
 import { Component, OnInit } from "@angular/core";
 import { StorageService } from "src/app/services/storage.service";
@@ -20,7 +20,7 @@ export class ListComponent implements OnInit {
     console.log(this.today);
   }
   changeMsg() {
-    this.storage.msg = "我是改变后的值";
+    // this.storage.msg = "我是改变后的值";
   }
 
   ngOnInit(): void {}

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

@@ -4,23 +4,22 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:07:14
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 16:15:13
+ * @LastEditTime: 2022-03-07 17:09:00
  */
-import { Component, EventEmitter, OnInit, Output } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
-
+import { StorageService } from "src/app/services/storage.service";
 @Component({
   selector: "app-head",
   templateUrl: "./head.component.html",
   styleUrls: ["./head.component.scss"],
 })
 export class HeadComponent implements OnInit {
-  // 实例化事件广播
+  constructor(public storage: StorageService) {}
-  @Output() private outerInput = new EventEmitter();
-  constructor() {}
-  ngOnInit(): void {}
   getSearchData(e: any) {
     // 发送事件数据
-    this.outerInput.emit("12341234");
+    // this.storage.inputData = e.target.value;
+    localStorage.setItem("input", e.target.value);
     console.log("方法触发", e.target.value);
   }
+  ngOnInit(): void {}
 }

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

@@ -4,11 +4,13 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:06:15
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 16:15:54
+ * @LastEditTime: 2022-03-08 10:34:38
 -->
-<app-head (outerInput)="receiveSearchInput($event)"></app-head>
+<app-head></app-head>
 <hr />
 <div>
+  <p>home work</p>
+  <!-- <p>{{ storage.inputData }}</p> -->
   <p>{{ result }}</p>
 </div>
 <app-body></app-body>

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

@@ -4,13 +4,12 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:06:15
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 16:15:36
+ * @LastEditTime: 2022-03-08 14:38:05
  */
 import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
+import { RequestService } from "src/app/services/request.service";
 // 引入服务
 import { StorageService } from "src/app/services/storage.service";
-// 实例化类
-// let storage = new StorageService();
 @Component({
   selector: "app-home",
   templateUrl: "./home.component.html",
@@ -18,13 +17,26 @@ import { StorageService } from "src/app/services/storage.service";
 })
 export class HomeComponent implements OnInit {
   @ViewChild("homeHead", { static: true }) homeHead: any;
-  public result: any;
+  public result: any = "";
-  // 依赖注入 语法糖写法 相当于在构造器中 实例化对象
+  constructor(public storage: StorageService, public request: RequestService) {}
-  constructor(public storage: StorageService) {}
+  // init结尾的函数只会调用一次 checked结尾的函数会多次调用
-  ngOnInit(): void {}
+  // 初始化组件和指令时调用(一般用于请求api)
-  ngAfterViewInit(): void {}
+  ngOnInit(): void {
-  receiveSearchInput(e: any) {
+    const res = this.request.getData();
-    this.result = e;
+    console.log(res);
-    console.log("接收到的", this.result);
+    this.receiveRxjsData();
+  }
+  receiveRxjsData() {
+    let res = this.request.getRxjsData();
+    res.subscribe((data) => {
+      console.log("通过rxjs获取的数据", data);
+    });
+    // setTimeout(() => {
+    //   // 取消订阅
+    //   returnRes.unsubscribe();
+    // }, 1000);
+    // setInterval(() => {
+    //   console.log("延迟期触发");
+    // }, 1000);
   }
 }

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

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:06:01
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 10:19:20
+ * @LastEditTime: 2022-03-07 16:58:46
  */
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";

src/app/services/request.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RequestService } from './request.service';
+
+describe('RequestService', () => {
+  let service: RequestService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(RequestService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/request.service.ts

@@ -0,0 +1,38 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-08 10:51:22
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-08 14:52:32
+ */
+import { Injectable } from "@angular/core";
+// 引入rxjs
+import { Observable } from "rxjs";
+@Injectable({
+  providedIn: "root",
+})
+export class RequestService {
+  constructor() {}
+  // 同步方法
+  getData() {
+    console.log("%c获取需要的数据", "color:pink");
+    return "1234";
+  }
+  // 使用rxjs
+  getRxjsData() {
+    let count = 0;
+    return new Observable((observer) => {
+      setTimeout(() => {
+        // setInterval(() => {
+        //   count++;
+        // }, 1000);
+        observer.next(count);
+        // let username = "张三";
+
+        // observer.error("错误");
+      }, 3000);
+    });
+  }
+  // 过一秒以后撤回刚才的操作
+}

src/app/services/storage.service.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-07 09:39:15
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 15:08:49
+ * @LastEditTime: 2022-03-07 16:51:22
  */
 import { Injectable } from "@angular/core";
 
@@ -13,25 +13,6 @@ import { Injectable } from "@angular/core";
 })
 export class StorageService {
   constructor() {}
-  public msg: string = "我是信息";
+  // 定义公共数据
-  getTest() {
+  public inputData: string = "";
-    return "this is service";
-  }
-
-  // 添加缓存
-  setStorage(key: any, value: any) {
-    localStorage.setItem(key, JSON.stringify(value));
-  }
-  // 读取缓存
-  getStorage(key: any): any {
-    return localStorage.getItem(key);
-  }
-  // 删除指定缓存
-  removeStorage(key: any): any {
-    localStorage.removeItem(key);
-  }
-  // 删除所有缓存
-  clearStorage() {
-    localStorage.clear();
-  }
 }