commit

src/app/app.component.html

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 16:21:23
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-04 15:50:32
+ * @LastEditTime: 2022-03-07 10:55:06
 -->
 
 <!-- 路由配置后显示的区域 -->

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

@@ -4,10 +4,10 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-04 10:47:32
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-04 14:39:52
+ * @LastEditTime: 2022-03-07 10:51:29
  */
 import { Component, OnInit } from "@angular/core";
-
+// import { StorageService } from "src/app/services/storage.service";
 @Component({
   selector: "app-list",
   templateUrl: "./list.component.html",

src/app/core/core.module.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 16:48:51
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-04 15:50:01
+ * @LastEditTime: 2022-03-07 10:55:37
  */
 import { NgModule } from "@angular/core";
 import { PagesModule } from "../pages/pages.module";

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

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:07:14
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-04 14:11:19
+ * @LastEditTime: 2022-03-07 14:45:54
 -->
 <div class="root">
   <div class="demo1">

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

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:07:14
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-04 14:10:42
+ * @LastEditTime: 2022-03-07 14:26:59
  */
 import { Component, OnInit } from "@angular/core";
 
@@ -24,6 +24,8 @@ export class HeadComponent implements OnInit {
   public orderStatus: number = 1;
   public red: string = "blue";
   constructor() {}
-
+  testViewChild() {
+    console.log("我是子组件的方法");
+  }
   ngOnInit(): void {}
 }

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

@@ -4,10 +4,11 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:06:15
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 08:58:41
+ * @LastEditTime: 2022-03-07 14:51:00
 -->‘
 <!-- <app-news></app-news> -->
-<!-- <app-head></app-head> -->
+
+<app-head #homeHead></app-head>
 <!-- <app-news></app-news> -->
 <!-- <app-list></app-list> -->
 <!-- <app-body></app-body> -->
@@ -23,5 +24,10 @@
       <button (click)="changeKeyword()">改值</button>
       <button (click)="getKeyword()">获取值</button>
     </div>
+
+    <div class="input">
+      <!-- 失去input焦点触发 -->
+      <input type="text" (change)="getContent()" />
+    </div>
   </div>
 </div>

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

@@ -4,9 +4,9 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:06:15
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 10:20:44
+ * @LastEditTime: 2022-03-07 14:53:10
  */
-import { Component, OnInit } from "@angular/core";
+import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
 // 引入服务
 import { StorageService } from "src/app/services/storage.service";
 // 实例化类
@@ -17,6 +17,7 @@ import { StorageService } from "src/app/services/storage.service";
   styleUrls: ["./home.component.scss"],
 })
 export class HomeComponent implements OnInit {
+  @ViewChild("homeHead", { static: true }) homeHead: any;
   public textContent: any;
   // 依赖注入 语法糖写法 相当于在构造器中 实例化对象
   constructor(public storage: StorageService) {
@@ -35,11 +36,26 @@ export class HomeComponent implements OnInit {
     // console.log(res);
   }
 
-  ngOnInit(): void {}
+  // 组件和指令初始化完成(dom渲染还没有完成)
+  ngOnInit(): void {
+    // console.log("触发");
+  }
+  // dom加载完成后的生命周期函数
+  ngAfterViewInit(): void {
+    this.setDom();
+  }
+
   changeKeyword() {
     this.textContent = "改变keywords的值";
   }
+  getContent() {
+    console.log("触发");
+  }
   getKeyword() {
     console.log(this.textContent);
   }
+  setDom() {
+    this.homeHead.testViewChild();
+    // console.log(this.homeHead.nativeElement);
+  }
 }

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

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-04 10:45:56
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-04 15:36:47
+ * @LastEditTime: 2022-03-07 11:31:02
 -->
 <p>user works!</p>
 <app-info></app-info>

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

@@ -4,17 +4,18 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-04 10:42:33
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-04 15:47:19
+ * @LastEditTime: 2022-03-07 11:29:54
  */
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
+import { ComponentsModule } from "src/app/components/components.module";
 import { InfoComponent } from "./components/info/info.component";
 import { MineComponent } from "./components/mine/mine.component";
 import { UserComponent } from "./user.component";
 
 @NgModule({
   declarations: [InfoComponent, MineComponent, UserComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, ComponentsModule],
   exports: [InfoComponent, MineComponent, UserComponent],
 })
 export class UserModule {}