diff --git a/src/app/components/list/list.component.html b/src/app/components/list/list.component.html index 4ce59a2..839ad4a 100644 --- a/src/app/components/list/list.component.html +++ b/src/app/components/list/list.component.html @@ -4,15 +4,6 @@ * @Author: Ruin 🍭 * @Date: 2022-03-04 10:47:32 * @LastEditors: 刘引 - * @LastEditTime: 2022-03-04 14:21:15 + * @LastEditTime: 2022-03-07 16:00:33 --> -
-
-

管道的相关用法

-
-
-
- {{ today | date: "yyyy-MM-dd HH:mm:ss" }} -
-
-
+

list works

diff --git a/src/app/components/list/list.component.ts b/src/app/components/list/list.component.ts index 0851e92..1ec7667 100644 --- a/src/app/components/list/list.component.ts +++ b/src/app/components/list/list.component.ts @@ -4,10 +4,10 @@ * @Author: Ruin 🍭 * @Date: 2022-03-04 10:47:32 * @LastEditors: 刘引 - * @LastEditTime: 2022-03-07 10:51:29 + * @LastEditTime: 2022-03-07 15:13:23 */ import { Component, OnInit } from "@angular/core"; -// import { StorageService } from "src/app/services/storage.service"; +import { StorageService } from "src/app/services/storage.service"; @Component({ selector: "app-list", templateUrl: "./list.component.html", @@ -16,9 +16,12 @@ import { Component, OnInit } from "@angular/core"; export class ListComponent implements OnInit { public today: any = new Date(); - constructor() { + constructor(public storage: StorageService) { console.log(this.today); } + changeMsg() { + this.storage.msg = "我是改变后的值"; + } ngOnInit(): void {} } diff --git a/src/app/components/news/news.component.html b/src/app/components/news/news.component.html index e2b033c..ab317f2 100644 --- a/src/app/components/news/news.component.html +++ b/src/app/components/news/news.component.html @@ -4,24 +4,6 @@ * @Author: Ruin 🍭 * @Date: 2022-03-03 16:59:15 * @LastEditors: 刘引 - * @LastEditTime: 2022-03-04 15:34:24 + * @LastEditTime: 2022-03-07 16:00:44 --> -
-
-
-

事件的相关用法

-
- - - - -
- -
- - -
-

{{ msg }}

-
-
-
+

list works

diff --git a/src/app/pages/home/components/body/body.component.html b/src/app/pages/home/components/body/body.component.html index a30694e..9997027 100644 --- a/src/app/pages/home/components/body/body.component.html +++ b/src/app/pages/home/components/body/body.component.html @@ -4,32 +4,6 @@ * @Author: Ruin 🍭 * @Date: 2022-03-03 17:07:23 * @LastEditors: 刘引 - * @LastEditTime: 2022-03-04 13:35:29 + * @LastEditTime: 2022-03-07 15:59:54 --> -
-

body {{ content }}

- - - - 1+2 = {{ 1 + 2 }} - -
-
- - 开始进行数组循环渲染 - - -
-
-
引入图片
-
- 引入本地图片 - -
-
- 引入网络图片 - 无法显示 -
-
+

body works

diff --git a/src/app/pages/home/components/head/head.component.html b/src/app/pages/home/components/head/head.component.html index 157f2c7..9eec3d8 100644 --- a/src/app/pages/home/components/head/head.component.html +++ b/src/app/pages/home/components/head/head.component.html @@ -4,38 +4,11 @@ * @Author: Ruin 🍭 * @Date: 2022-03-03 17:07:14 * @LastEditors: 刘引 - * @LastEditTime: 2022-03-07 14:45:54 + * @LastEditTime: 2022-03-07 16:06:02 -->
-
-

1.循环数据显示数据的索引

- -
- -
-

2.条件判断语句

- -
- -
-

3.switch条件判断

- -

表示已经支付

-

已经支付并且确认订单

-

表示已经发货

-

已经没有货了

- -
- -
-

3.[*ngClass] [*ngStyle]

-

[*ngClass演示]

-

[*ngStyle演示]

+

head works

+
+
diff --git a/src/app/pages/home/components/head/head.component.ts b/src/app/pages/home/components/head/head.component.ts index 5f52fd3..de9f5ea 100644 --- a/src/app/pages/home/components/head/head.component.ts +++ b/src/app/pages/home/components/head/head.component.ts @@ -4,9 +4,9 @@ * @Author: Ruin 🍭 * @Date: 2022-03-03 17:07:14 * @LastEditors: 刘引 - * @LastEditTime: 2022-03-07 14:26:59 + * @LastEditTime: 2022-03-07 16:15:13 */ -import { Component, OnInit } from "@angular/core"; +import { Component, EventEmitter, OnInit, Output } from "@angular/core"; @Component({ selector: "app-head", @@ -14,18 +14,13 @@ import { Component, OnInit } from "@angular/core"; styleUrls: ["./head.component.scss"], }) export class HeadComponent implements OnInit { - public newsList: Array = [ - { title: "我是新闻1" }, - { title: "我是新闻2" }, - { title: "我是新闻3" }, - ]; - public flag: boolean = true; - //1表示已经支付 2并且确认订单 3表示已经发货 4表示已经收货 - public orderStatus: number = 1; - public red: string = "blue"; + // 实例化事件广播 + @Output() private outerInput = new EventEmitter(); constructor() {} - testViewChild() { - console.log("我是子组件的方法"); - } ngOnInit(): void {} + getSearchData(e: any) { + // 发送事件数据 + this.outerInput.emit("12341234"); + console.log("方法触发", e.target.value); + } } diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 5eee7b3..7aea474 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -4,30 +4,13 @@ * @Author: Ruin 🍭 * @Date: 2022-03-03 17:06:15 * @LastEditors: 刘引 - * @LastEditTime: 2022-03-07 14:51:00 --->‘ - - - + * @LastEditTime: 2022-03-07 16:15:54 +--> + +
+
+

{{ result }}

+
+ - -

home works!

-
-
-
-

双向数据绑定用法(只适用于表单) MVVM

- - {{ textContent | json }} -
-
- - -
- -
- - -
-
-
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 517e543..8396334 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -4,7 +4,7 @@ * @Author: Ruin 🍭 * @Date: 2022-03-03 17:06:15 * @LastEditors: 刘引 - * @LastEditTime: 2022-03-07 14:53:10 + * @LastEditTime: 2022-03-07 16:15:36 */ import { Component, ElementRef, OnInit, ViewChild } from "@angular/core"; // 引入服务 @@ -18,44 +18,13 @@ import { StorageService } from "src/app/services/storage.service"; }) export class HomeComponent implements OnInit { @ViewChild("homeHead", { static: true }) homeHead: any; - public textContent: any; + public result: any; // 依赖注入 语法糖写法 相当于在构造器中 实例化对象 - constructor(public storage: StorageService) { - // let res = storage.getTest(); - let key: string = "cat"; - let value: string = "hello"; - // 设置缓存 - storage.setStorage(key, value); - // 获取缓存 - let result = storage.getStorage(key); - // 删除缓存 - storage.removeStorage(key); - console.log(result); - // 清除所有缓存 - storage.clearStorage(); - // console.log(res); - } - - // 组件和指令初始化完成(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); + constructor(public storage: StorageService) {} + ngOnInit(): void {} + ngAfterViewInit(): void {} + receiveSearchInput(e: any) { + this.result = e; + console.log("接收到的", this.result); } } diff --git a/src/app/services/storage.service.ts b/src/app/services/storage.service.ts index 3227ada..d79aff2 100644 --- a/src/app/services/storage.service.ts +++ b/src/app/services/storage.service.ts @@ -4,7 +4,7 @@ * @Author: Ruin 🍭 * @Date: 2022-03-07 09:39:15 * @LastEditors: 刘引 - * @LastEditTime: 2022-03-07 10:21:29 + * @LastEditTime: 2022-03-07 15:08:49 */ import { Injectable } from "@angular/core"; @@ -13,6 +13,7 @@ import { Injectable } from "@angular/core"; }) export class StorageService { constructor() {} + public msg: string = "我是信息"; getTest() { return "this is service"; }