This commit is contained in:
Ruin
2022-03-04 11:33:15 +08:00
parent 19345cc653
commit 09be1dab5a
33 changed files with 341 additions and 45 deletions

View File

@@ -1 +1,23 @@
<p>body works!</p>
<!--
* @Description: {{ByRuin}}
* @Version: 2.0
* @Author: Ruin 🍭
* @Date: 2022-03-03 17:07:23
* @LastEditors: 刘引
* @LastEditTime: 2022-03-04 11:30:17
-->
<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>

View File

@@ -1,15 +1,21 @@
/*
* @Description: {{ByRuin}}
* @Version: 2.0
* @Author: Ruin 🍭
* @Date: 2022-03-03 17:07:23
* @LastEditors: 刘引
* @LastEditTime: 2022-03-04 11:31:45
*/
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-body',
templateUrl: './body.component.html',
styleUrls: ['./body.component.scss']
styleUrls: ['./body.component.scss'],
})
export class BodyComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
public content = '<h2>我是一个H2标签</h2>';
public arrList: Array<Number> = [1111, 222, 333, 444, 555];
constructor() {}
ngOnInit(): void {}
}

View File

@@ -1 +1,10 @@
<p>head works!</p>
<!--
* @Description: {{ByRuin}}
* @Version: 2.0
* @Author: Ruin 🍭
* @Date: 2022-03-03 17:07:14
* @LastEditors: 刘引
* @LastEditTime: 2022-03-04 11:04:54
-->
<p>{{ userName }}{{ title }}</p>
<p [title]="userName">我是一个p标签</p>

View File

@@ -1,15 +1,29 @@
/*
* @Description: {{ByRuin}}
* @Version: 2.0
* @Author: Ruin 🍭
* @Date: 2022-03-03 17:07:14
* @LastEditors: 刘引
* @LastEditTime: 2022-03-04 10:23:02
*/
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-head',
templateUrl: './head.component.html',
styleUrls: ['./head.component.scss']
styleUrls: ['./head.component.scss'],
})
export class HeadComponent implements OnInit {
public title = '我是头部组件';
public userName: string = '张三';
private age: number = 12;
protected school: string = 'xx中学';
constructor() { }
ngOnInit(): void {
}
public userInfo: object = {
userName: '李四',
age: 20,
};
constructor() {}
ngOnInit(): void {}
}