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-04 15:56:45 +08:00
parent 09be1dab5a
commit cdc15b979c
26 changed files with 296 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,20 +4,32 @@
* @Author: Ruin 🍭
* @Date: 2022-03-03 17:07:23
* @LastEditors: 刘引
* @LastEditTime: 2022-03-04 11:30:17
* @LastEditTime: 2022-03-04 13:35:29
-->
<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 class="root">
<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>

5
src/app/pages/home/components/body/body.component.scss
View File

@@ -0,0 +1,5 @@
.root {
div img {
vertical-align: middle;
}
}

14
src/app/pages/home/components/body/body.component.ts
View File

@@ -4,18 +4,20 @@
* @Author: Ruin 🍭
* @Date: 2022-03-03 17:07:23
* @LastEditors: 刘引
* @LastEditTime: 2022-03-04 11:31:45
* @LastEditTime: 2022-03-04 13:34:58
*/
import { Component, OnInit } from '@angular/core';
import { Component, OnInit } from "@angular/core";
@Component({
selector: 'app-body',
templateUrl: './body.component.html',
styleUrls: ['./body.component.scss'],
selector: "app-body",
templateUrl: "./body.component.html",
styleUrls: ["./body.component.scss"],
})
export class BodyComponent implements OnInit {
public content = '<h2>我是一个H2标签</h2>';
public content = "<h2>我是一个H2标签</h2>";
public arrList: Array<Number> = [1111, 222, 333, 444, 555];
public picUrl: string =
"http://img7.dl.ltimg.net/emoji/egg/5c4055492549591e51027e88?imageView2/1/w/300/h/300&sign=870d77486943cef24b9208b37ae48f07&t=6221b257";
constructor() {}
ngOnInit(): void {}
}

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

@@ -4,7 +4,38 @@
* @Author: Ruin 🍭
* @Date: 2022-03-03 17:07:14
* @LastEditors: 刘引
* @LastEditTime: 2022-03-04 11:04:54
* @LastEditTime: 2022-03-04 14:11:19
-->
<p>{{ userName }}{{ title }}</p>
<p [title]="userName">我是一个p标签</p>
<div class="root">
<div class="demo1">
<h2>1.循环数据显示数据的索引</h2>
<ul>
<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>

11
src/app/pages/home/components/head/head.component.scss
View File

@@ -0,0 +1,11 @@
.root {
.red {
color: red;
}
.blue {
color: blue;
}
.orange {
color: orange;
}
}

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

@@ -4,25 +4,25 @@
* @Author: Ruin 🍭
* @Date: 2022-03-03 17:07:14
* @LastEditors: 刘引
* @LastEditTime: 2022-03-04 10:23:02
* @LastEditTime: 2022-03-04 14:10:42
*/
import { Component, OnInit } from '@angular/core';
import { Component, OnInit } from "@angular/core";
@Component({
selector: 'app-head',
templateUrl: './head.component.html',
styleUrls: ['./head.component.scss'],
selector: "app-head",
templateUrl: "./head.component.html",
styleUrls: ["./head.component.scss"],
})
export class HeadComponent implements OnInit {
public title = '我是头部组件';
public userName: string = '张三';
private age: number = 12;
protected school: string = 'xx中学';
public userInfo: object = {
userName: '李四',
age: 20,
};
public newsList: Array<any> = [
{ title: "我是新闻1" },
{ title: "我是新闻2" },
{ title: "我是新闻3" },
];
public flag: boolean = true;
//1表示已经支付 2并且确认订单 3表示已经发货 4表示已经收货
public orderStatus: number = 1;
public red: string = "blue";
constructor() {}
ngOnInit(): void {}

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

@@ -4,10 +4,24 @@
* @Author: Ruin 🍭
* @Date: 2022-03-03 17:06:15
* @LastEditors: 刘引
* @LastEditTime: 2022-03-04 10:53:57
* @LastEditTime: 2022-03-04 15:53:16
-->
<p>home works!</p>
<app-head></app-head>
<app-news></app-news>
<app-list></app-list>
<app-body></app-body>
<!-- <app-news></app-news> -->
<!-- <app-head></app-head> -->
<!-- <app-news></app-news> -->
<!-- <app-list></app-list> -->
<!-- <app-body></app-body> -->
<div class="root">
<div class="container">
<div class="w">
<h2>双向数据绑定用法(只适用于表单) MVVM</h2>
<input type="text" [(ngModel)]="textContent" />
<span>{{ textContent }}</span>
</div>
<div class="changeKey">
<button (click)="changeKeyword()">改值</button>
<button (click)="getKeyword()">获取值</button>
</div>
</div>
</div>

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

@@ -1,15 +1,19 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit } from "@angular/core";
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
selector: "app-home",
templateUrl: "./home.component.html",
styleUrls: ["./home.component.scss"],
})
export class HomeComponent implements OnInit {
public textContent: any;
constructor() {}
constructor() { }
ngOnInit(): void {
ngOnInit(): void {}
changeKeyword() {
this.textContent = "改变keywords的值";
}
getKeyword() {
console.log(this.textContent);
}
}

21
src/app/pages/home/home.module.ts
View File

@@ -4,17 +4,20 @@
* @Author: Ruin 🍭
* @Date: 2022-03-03 17:06:01
* @LastEditors: 刘引
* @LastEditTime: 2022-03-04 11:01:41
* @LastEditTime: 2022-03-04 15:42:19
*/
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { HeadComponent } from './components/head/head.component';
import { BodyComponent } from './components/body/body.component';
import { ComponentsModule } from 'src/app/components/components.module';
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HomeComponent } from "./home.component";
import { HeadComponent } from "./components/head/head.component";
import { BodyComponent } from "./components/body/body.component";
import { ComponentsModule } from "src/app/components/components.module";
// 引入双向数据绑定
import { FormsModule } from "@angular/forms";
@NgModule({
declarations: [HomeComponent, HeadComponent, BodyComponent],
imports: [CommonModule, ComponentsModule],
// exports: [HomeComponent, HeadComponent, BodyComponent],
imports: [CommonModule, ComponentsModule, FormsModule],
exports: [HomeComponent, HeadComponent, BodyComponent],
})
export class HomeModule {}

4
src/app/pages/pages.module.ts
View File

@@ -4,7 +4,7 @@
* @Author: Ruin 🍭
* @Date: 2022-03-03 17:03:51
* @LastEditors: 刘引
* @LastEditTime: 2022-03-04 11:32:51
* @LastEditTime: 2022-03-04 15:46:33
*/
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
@@ -13,6 +13,6 @@ import { UserModule } from "./user/user.module";
@NgModule({
declarations: [],
imports: [CommonModule, HomeModule, UserModule],
// exports: [CommonModule, HomeModule, UserModule],
exports: [CommonModule, HomeModule, UserModule],
})
export class PagesModule {}

2
src/app/pages/user/user.component.html
View File

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

14
src/app/pages/user/user.module.ts
View File

@@ -4,17 +4,17 @@
* @Author: Ruin 🍭
* @Date: 2022-03-04 10:42:33
* @LastEditors: 刘引
* @LastEditTime: 2022-03-04 11:02:36
* @LastEditTime: 2022-03-04 15:47:19
*/
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { InfoComponent } from './components/info/info.component';
import { MineComponent } from './components/mine/mine.component';
import { UserComponent } from './user.component';
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
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],
// exports: [InfoComponent, MineComponent, UserComponent],
exports: [InfoComponent, MineComponent, UserComponent],
})
export class UserModule {}