+ {{ today | date: "yyyy-MM-dd HH:mm:ss" }}
+
+ -
-
- {{ item }} -
+
+
+
diff --git a/src/app/pages/home/components/body/body.component.scss b/src/app/pages/home/components/body/body.component.scss
index e69de29..fbd5da1 100644
--- a/src/app/pages/home/components/body/body.component.scss
+++ b/src/app/pages/home/components/body/body.component.scss
@@ -0,0 +1,5 @@
+.root {
+ div img {
+ vertical-align: middle;
+ }
+}
diff --git a/src/app/pages/home/components/body/body.component.ts b/src/app/pages/home/components/body/body.component.ts
index bf53b07..cda665d 100644
--- a/src/app/pages/home/components/body/body.component.ts
+++ b/src/app/pages/home/components/body/body.component.ts
@@ -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 = 'body {{ content }}
+ + + + 1+2 = {{ 1 + 2 }} + ++
+
+ 开始进行数组循环渲染
+
+
+ -
+
- {{ item }} +
+
引入图片
+
+ 引入本地图片
+ 
+
+
+
+ 引入网络图片
+ ![无法显示]()
+
我是一个H2标签
'; + public content = "我是一个H2标签
"; public arrList: Array{{ userName }}{{ title }}
-我是一个p标签
+
+
diff --git a/src/app/pages/home/components/head/head.component.scss b/src/app/pages/home/components/head/head.component.scss
index e69de29..182c31a 100644
--- a/src/app/pages/home/components/head/head.component.scss
+++ b/src/app/pages/home/components/head/head.component.scss
@@ -0,0 +1,11 @@
+.root {
+ .red {
+ color: red;
+ }
+ .blue {
+ color: blue;
+ }
+ .orange {
+ color: orange;
+ }
+}
diff --git a/src/app/pages/home/components/head/head.component.ts b/src/app/pages/home/components/head/head.component.ts
index fc8017e..0fd9c75 100644
--- a/src/app/pages/home/components/head/head.component.ts
+++ b/src/app/pages/home/components/head/head.component.ts
@@ -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
+
+
+ 1.循环数据显示数据的索引
+-
+
- + + {{ key + 1 }} {{ item.title }} + + +
+
+
+
+ 2.条件判断语句
+
+
+
+
+ 3.switch条件判断
+ +表示已经支付
+已经支付并且确认订单
+表示已经发货
+已经没有货了
+ +
+
+3.[*ngClass] [*ngStyle]
+[*ngClass演示]
+[*ngStyle演示]
+home works!
-
+
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index 73acf06..774b17a 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -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);
}
-
}
diff --git a/src/app/pages/home/home.module.ts b/src/app/pages/home/home.module.ts
index 7fc4bce..a032a1c 100644
--- a/src/app/pages/home/home.module.ts
+++ b/src/app/pages/home/home.module.ts
@@ -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 {}
diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
index 89b1b75..bb1bc65 100644
--- a/src/app/pages/pages.module.ts
+++ b/src/app/pages/pages.module.ts
@@ -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 {}
diff --git a/src/app/pages/user/user.component.html b/src/app/pages/user/user.component.html
index cf34aed..574ae92 100644
--- a/src/app/pages/user/user.component.html
+++ b/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 10:48:52
+ * @LastEditTime: 2022-03-04 15:36:47
-->
+
+
+
+ 双向数据绑定用法(只适用于表单) MVVM
+ + {{ textContent }} +
+
+
+
+ user works!