Ruin/ng-frame
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
Ruin
2022-03-07 16:19:58 +08:00
parent d9d5a69b5f
commit 76b499fba6
9 changed files with 43 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/components/list/list.component.html
View File

@@ -4,15 +4,6 @@
* @Author: Ruin 🍭 * @Author: Ruin 🍭
* @Date: 2022-03-04 10:47:32 * @Date: 2022-03-04 10:47:32
* @LastEditors: 刘引 * @LastEditors: 刘引
* @LastEditTime: 2022-03-04 14:21:15 * @LastEditTime: 2022-03-07 16:00:33
--> -->
<div class="root"> <p>list works</p>
<header>
<h2>管道的相关用法</h2>
</header>
<article>
<div class="time">
{{ today | date: "yyyy-MM-dd HH:mm:ss" }}
</div>
</article>
</div>

9
src/app/components/list/list.component.ts
View File

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

22
src/app/components/news/news.component.html
View File

@@ -4,24 +4,6 @@
* @Author: Ruin 🍭 * @Author: Ruin 🍭
* @Date: 2022-03-03 16:59:15 * @Date: 2022-03-03 16:59:15
* @LastEditors: 刘引 * @LastEditors: 刘引
* @LastEditTime: 2022-03-04 15:34:24 * @LastEditTime: 2022-03-07 16:00:44
--> -->
<div class="root"> <p>list works</p>
<div class="w">
<div class="container">
<h2>事件的相关用法</h2>
<div class="demo">
<button (click)="getNum()">执行事件</button>
<button (click)="getData()">获取数据</button>
<button (click)="setData()">改变数据</button>
<button (click)="changeDom($event)">更高按钮颜色</button>
</div>
<div class="demo2">
<!-- 传递input输入框中的值 -->
<input (keydown)="pressKeyboard($event)" type="text" />
</div>
<p>{{ msg }}</p>
</div>
</div>
</div>

30
src/app/pages/home/components/body/body.component.html
View File

@@ -4,32 +4,6 @@
* @Author: Ruin 🍭 * @Author: Ruin 🍭
* @Date: 2022-03-03 17:07:23 * @Date: 2022-03-03 17:07:23
* @LastEditors: 刘引 * @LastEditors: 刘引
* @LastEditTime: 2022-03-04 13:35:29 * @LastEditTime: 2022-03-07 15:59:54
--> -->
<div class="root"> <p>body works</p>
<p>body {{ content }}</p>
<!-- 渲染html标签 -->
<span [innerHTML]="content"></span>
<!-- 进行简单计算 -->
<span>1+2 = {{ 1 + 2 }}</span>
<!-- 使用数据 -->
<hr />
<div>
<head>
开始进行数组循环渲染
</head>
<ul>
<li *ngFor="let item of arrList">{{ item }}</li>
</ul>
</div>
<hr />
<h5>引入图片</h5>
<div>
<span>引入本地图片</span>
<img src="assets/images/home/cat.png" alt="" />
</div>
<div>
<span>引入网络图片</span>
<img [src]="picUrl" alt="无法显示" />
</div>
</div>

35
src/app/pages/home/components/head/head.component.html
View File

@@ -4,38 +4,11 @@
* @Author: Ruin 🍭 * @Author: Ruin 🍭
* @Date: 2022-03-03 17:07:14 * @Date: 2022-03-03 17:07:14
* @LastEditors: 刘引 * @LastEditors: 刘引
* @LastEditTime: 2022-03-07 14:45:54 * @LastEditTime: 2022-03-07 16:06:02
--> -->
<div class="root"> <div class="root">
<div class="demo1"> <p>head works</p>
<h2>1.循环数据显示数据的索引</h2> <div class="searchInput">
<ul> <input type="type" (change)="getSearchData($event)" />
<li *ngFor="let item of newsList; let key = index">
<span [class]="key === 1 ? 'red' : ''">
{{ key + 1 }} {{ item.title }}
</span>
</li>
</ul>
</div>
<div class="demo2">
<h2>2.条件判断语句</h2>
<img src="assets/images/home/cat.png" alt="" *ngIf="flag == true" />
</div>
<div class="ng-switch">
<h2>3.switch条件判断</h2>
<span [ngSwitch]="orderStatus">
<p *ngSwitchCase="1">表示已经支付</p>
<p *ngSwitchCase="2">已经支付并且确认订单</p>
<p *ngSwitchCase="3">表示已经发货</p>
<p *ngSwitchCase="4">已经没有货了</p>
</span>
</div>
<div class="demo4">
<h2>3.[*ngClass] [*ngStyle]</h2>
<p [ngClass]="{ red: flag, blue: !flag }">[*ngClass演示]</p>
<p [ngStyle]="{ color: red, fontSize: '12px' }">[*ngStyle演示]</p>
</div> </div>
</div> </div>

23
src/app/pages/home/components/head/head.component.ts
View File

@@ -4,9 +4,9 @@
* @Author: Ruin 🍭 * @Author: Ruin 🍭
* @Date: 2022-03-03 17:07:14 * @Date: 2022-03-03 17:07:14
* @LastEditors: 刘引 * @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({ @Component({
selector: "app-head", selector: "app-head",
@@ -14,18 +14,13 @@ import { Component, OnInit } from "@angular/core";
styleUrls: ["./head.component.scss"], styleUrls: ["./head.component.scss"],
}) })
export class HeadComponent implements OnInit { export class HeadComponent implements OnInit {
public newsList: Array<any> = [ // 实例化事件广播
{ title: "我是新闻1" }, @Output() private outerInput = new EventEmitter();
{ title: "我是新闻2" },
{ title: "我是新闻3" },
];
public flag: boolean = true;
//1表示已经支付 2并且确认订单 3表示已经发货 4表示已经收货
public orderStatus: number = 1;
public red: string = "blue";
constructor() {} constructor() {}
testViewChild() {
console.log("我是子组件的方法");
}
ngOnInit(): void {} ngOnInit(): void {}
getSearchData(e: any) {
// 发送事件数据
this.outerInput.emit("12341234");
console.log("方法触发", e.target.value);
}
} }

33
src/app/pages/home/home.component.html
View File

@@ -4,30 +4,13 @@
* @Author: Ruin 🍭 * @Author: Ruin 🍭
* @Date: 2022-03-03 17:06:15 * @Date: 2022-03-03 17:06:15
* @LastEditors: 刘引 * @LastEditors: 刘引
* @LastEditTime: 2022-03-07 14:51:00 * @LastEditTime: 2022-03-07 16:15:54
-->‘ -->
<!-- <app-news></app-news> --> <app-head (outerInput)="receiveSearchInput($event)"></app-head>
<hr />
<app-head #homeHead></app-head> <div>
<p>{{ result }}</p>
</div>
<app-body></app-body>
<!-- <app-news></app-news> --> <!-- <app-news></app-news> -->
<!-- <app-list></app-list> --> <!-- <app-list></app-list> -->
<!-- <app-body></app-body> -->
<p>home works!</p>
<div class="root">
<div class="container">
<div class="w">
<h2>双向数据绑定用法(只适用于表单) MVVM</h2>
<input type="text" [(ngModel)]="textContent" />
<span>{{ textContent | json }}</span>
</div>
<div class="changeKey">
<button (click)="changeKeyword()">改值</button>
<button (click)="getKeyword()">获取值</button>
</div>
<div class="input">
<!-- 失去input焦点触发 -->
<input type="text" (change)="getContent()" />
</div>
</div>
</div>

47
src/app/pages/home/home.component.ts
View File

@@ -4,7 +4,7 @@
* @Author: Ruin 🍭 * @Author: Ruin 🍭
* @Date: 2022-03-03 17:06:15 * @Date: 2022-03-03 17:06:15
* @LastEditors: 刘引 * @LastEditors: 刘引
* @LastEditTime: 2022-03-07 14:53:10 * @LastEditTime: 2022-03-07 16:15:36
*/ */
import { Component, ElementRef, OnInit, ViewChild } from "@angular/core"; 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 { export class HomeComponent implements OnInit {
@ViewChild("homeHead", { static: true }) homeHead: any; @ViewChild("homeHead", { static: true }) homeHead: any;
public textContent: any; public result: any;
// 依赖注入 语法糖写法 相当于在构造器中 实例化对象 // 依赖注入 语法糖写法 相当于在构造器中 实例化对象
constructor(public storage: StorageService) { constructor(public storage: StorageService) {}
// let res = storage.getTest(); ngOnInit(): void {}
let key: string = "cat"; ngAfterViewInit(): void {}
let value: string = "hello"; receiveSearchInput(e: any) {
// 设置缓存 this.result = e;
storage.setStorage(key, value); console.log("接收到的", this.result);
// 获取缓存
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);
} }
} }

3
src/app/services/storage.service.ts
View File

@@ -4,7 +4,7 @@
* @Author: Ruin 🍭 * @Author: Ruin 🍭
* @Date: 2022-03-07 09:39:15 * @Date: 2022-03-07 09:39:15
* @LastEditors: 刘引 * @LastEditors: 刘引
* @LastEditTime: 2022-03-07 10:21:29 * @LastEditTime: 2022-03-07 15:08:49
*/ */
import { Injectable } from "@angular/core"; import { Injectable } from "@angular/core";
@@ -13,6 +13,7 @@ import { Injectable } from "@angular/core";
}) })
export class StorageService { export class StorageService {
constructor() {} constructor() {}
public msg: string = "我是信息";
getTest() { getTest() {
return "this is service"; return "this is service";
} }