Angular 入门(一)

陆幼刚 發表於 2021-4-28 15:30:00

前端三大框架 :
Vue:开源项目,适合中小型项目
React:Facebook公司 ,适合中小型项目+RN手机端开发
Angular:Google公司,适合大型项目;简称NG,和Vue年相似
<h2>初识Angular______________________________</h2>
脚本方式: 适合最基本的入门, 实际开发没用.
脚手架方式: 属于工程化的开发方式, 利用脚手架生成完善的项目包.
安装脚手架: npm i -g @angular/cli --force 安装过程中, 有可能弹出选项, 询问是否要分享使用体验(y/N): 直接回车即可
<img src="https://img2020.cnblogs.com/blog/1770052/202104/1770052-20210428084939253-482741749.png" alt="" loading="lazy">
 
 安装成功之后可以通过ng v 查看Angular版本
<img src="https://img2020.cnblogs.com/blog/1770052/202104/1770052-20210428085206935-1386385641.png" alt="" width="178" height="169" loading="lazy">
 
 生成项目包, 关注 cmd 开启的位置, 在哪开在哪生成
生成过程会有很多项目的询问, 都直接回车采用默认值即可; 不然容易会出现各种bug.
<div class="cnblogs_code">
<pre>ng new 包名</pre>
</div>
<div class="cnblogs_code">
<pre>例如: ng new ngpro</pre>
</div>
生成结果中, 只要有这个 successfully 字样即可, 此行不是最后一行
<img src="https://img2020.cnblogs.com/blog/1770052/202104/1770052-20210428085529539-967874424.png" alt="" loading="lazy">
 
 启动项目: 在项目目录下 , 即 ngpro 目录下执行
<div class="cnblogs_code">
<pre>ng serve --open</pre>
</div>
项目端口号: 4200
<img src="https://img2020.cnblogs.com/blog/1770052/202104/1770052-20210428085619321-1038951729.png" alt="" loading="lazy">
 
 项目的启动_______________________________________
当访问: localhost:4200 之后, 发生了什么?
访问当前计算机上, 端口号是4200的程序.
4200的程序, 就是 Angular 项目的自带服务器的端口号.
服务器的默认设定: index.html ; 来访用户如果不指定文件名, 则默认提供 index.html
根组件:  <app-root></app-root>
angular采用 TypeScript 语言进行逻辑层编写
main.ts : 此文件是 webpack 打包工具, 在项目运行时会自动打包引入到 index.html 中
app/app.module.ts 此文件是项目的根配置文件
app.component.ts 文件, 此文件就是项目的根组件, 类似于 React的 App.js 和 Vue的 App.vue
组件:
<img src="https://img2020.cnblogs.com/blog/1770052/202104/1770052-20210428090756922-1972495424.png" alt="" loading="lazy">
 
<h2> 组件的制作__________________________</h2>
Angular的组件类似于微信小程序和原生开发, 把一个页面拆分成3个文件: html , css , ts
angular的文件命名规范:
名字.作用.代码类型
例如: myc01.component.ts 名字是myc01, 作用是组件component, 代码类型ts文件
首先是在App文件目录下创建文件夹myc01
<img src="https://img2020.cnblogs.com/blog/1770052/202104/1770052-20210428093636176-1936310836.png" alt="" width="227" height="131" loading="lazy">
 
 然后创建在该文件夹下创建3个文件分别为app.component.css,app.component.ts ,app.component.html
<img src="https://img2020.cnblogs.com/blog/1770052/202104/1770052-20210428094300528-145488117.png" alt="" width="322" height="52" loading="lazy">
 
 html文件
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_261c0f67-32f2-4b2c-90b9-3442c74c0833" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_261c0f67-32f2-4b2c-90b9-3442c74c0833" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_261c0f67-32f2-4b2c-90b9-3442c74c0833" class="cnblogs_code_hide">
<pre><h1>Hello, 我的第一个组件</h1>
</pre>
</div>
View Code</div>
css文件就是相应的一些样式这里就不写出来了
ts文件
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_17e638ea-6b8e-4a0d-8dd6-182704bf265e" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_17e638ea-6b8e-4a0d-8dd6-182704bf265e" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_17e638ea-6b8e-4a0d-8dd6-182704bf265e" class="cnblogs_code_hide">
<pre>// 在之前安装插件的前提下:
// ng-component
import { Component, OnInit } from '@angular/core';

/**
* 在原生开发中, html文件是主文件, 运行的是html文件, 在html中引入了其它的css和js文件
*
* 在NG开发中, ts文件是主文件, 在ts文件中引入html 和 css
*/
@Component({
// 当前组件使用时的标签名
selector: 'app-myc01', // <app-myc01></app-myc01>
// 引入关联的html
templateUrl: './myc01.component.html',
// 引入关联的css, 数组类型说明可以引入多个css文件
styleUrls: ['./myc01.component.css'],
})
// 类名要求:大驼峰, 即首字母大写
export class Myc01Component implements OnInit {
constructor() {}

ngOnInit(): void {}
}

// 组件制作之后, 必须全局注册, 才能到根组件中使用!
// app.module.ts</pre>
</div>
View Code</div>
最后需要在app.module.ts文件中注册组件
app.module.ts
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_5934d0d7-4132-44f4-8a2e-5d649e0b1681" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_5934d0d7-4132-44f4-8a2e-5d649e0b1681" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_5934d0d7-4132-44f4-8a2e-5d649e0b1681" class="cnblogs_code_hide">
<pre>import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
// 引入组件, 然后注册
import { Myc01Component } from './myc01/myc01.component';
import { Myc02Component } from './myc02/myc02.component';

@NgModule({
// declarations: 用于注册组件
declarations: [
AppComponent, Myc01Component, Myc02Component
],
// imports: 引入模块
imports: [
BrowserModule
],
providers: [],
bootstrap:
})
export class AppModule { }</pre>
</div>
View Code</div>
最后在根组件app.component.html中引用即可
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_1466fce0-647c-4799-a883-820b6e724ba1" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_1466fce0-647c-4799-a883-820b6e724ba1" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_1466fce0-647c-4799-a883-820b6e724ba1" class="cnblogs_code_hide">
<pre><h1>HELlo word</h1>

<app-myc01></app-myc01>

<app-myc02></app-myc02></pre>
</div>
View Code</div>
<h2>快捷命令________________________</h2>
官方为了提高程序员的工作效率, 对很多操作提供了快捷的命令
项目启动命令:
<div class="cnblogs_code">
<pre>ng serve --open : 启动服务并在默认浏览器自动打开
简化: ng s -o</pre>
</div>
生成组件命令
<div class="cnblogs_code">
<pre>g generate component 组件名

generate: 生成

component: 组件

简化:
ng g c 组件名</pre>
</div>
例如: ng g c myc03
<img src="https://img2020.cnblogs.com/blog/1770052/202104/1770052-20210428101200426-2117982064.png" alt="" loading="lazy">
 这种快捷方式会给app文件夹生成对应文件并且会在app.module.ts中自动引入该组件
<h2>插值 __________________________________</h2>
把 js 代码中的变量, 插入到 html 代码中: {{}}
在组件ts文件中定义一些数据
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_2e37c24a-5255-485c-98db-cf18e00f21d8" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_2e37c24a-5255-485c-98db-cf18e00f21d8" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_2e37c24a-5255-485c-98db-cf18e00f21d8" class="cnblogs_code_hide">
<pre>import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-myc03',
templateUrl: './myc03.component.html',
styleUrls: ['./myc03.component.css'],
})
export class Myc03Component implements OnInit {
name = '天天';
age = 33;
married = true;

skills = ['vue', 'dom', 'axios', 'vue3.0'];

boss = { name: '天霸', age: 39 };

constructor() {}

ngOnInit(): void {}
}

// 面向对象
// class Demo {
// name = '东东';
// }

// 对象
// const obj = {
// name: '东东',
// };</pre>
</div>
View Code</div>
组件的HTML文件中用插值语法
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_f937d2cf-a152-4a30-b5ee-72e36cfe6187" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_f937d2cf-a152-4a30-b5ee-72e36cfe6187" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_f937d2cf-a152-4a30-b5ee-72e36cfe6187" class="cnblogs_code_hide">
<pre><p>myc03 works!</p>

<ul>
<li>{{ name }}</li>
<li>{{ age }}</li>
<li>{{ married }}</li>
<li>{{ skills }}</li>
<li>{{ boss }}</li>
<li>{{ skills }}</li>
<li>{{ boss.age }}</li>
</ul>

<ul>

<li>{{ age + 4 }}</li>
<li>{{ age - 4 }}</li>
<li>{{ age * 4 }}</li>
<li>{{ age / 4 }}</li>
<li>{{ age % 4 }}</li>
</ul>

<ul>

<li>{{ age > 5 }}</li>
<li>{{ age >= 5 }}</li>
<li>{{ age < 5 }}</li>
<li>{{ age <= 5 }}</li>
<li>{{ age == 5 }}</li>
<li>{{ age != 5 }}</li>
</ul>

<ul>

<li>{{ true && true }}</li>
<li>{{ true && false }}</li>
<li>{{ true || false }}</li>
<li>{{ false || false }}</li>
<li>{{ !true }}</li>
<li>{{ !false }}</li>
</ul>

<ul>

<li>{{ age > 18 ? "成年" : "未成年" }}</li>
<li>{{ married ? "已婚" : "未婚" }}</li>
</ul>

<ul>

<li>{{ skills.toUpperCase() }}</li>
</ul></pre>
</div>
View Code</div>
 
<h2>属性绑定_________________________</h2>
快捷生成组件 ng g c myc04
在组件ts文件中定义一些数据
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_07bc4e1c-0da3-43e8-abd2-3abfb5a928aa" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_07bc4e1c-0da3-43e8-abd2-3abfb5a928aa" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_07bc4e1c-0da3-43e8-abd2-3abfb5a928aa" class="cnblogs_code_hide">
<pre>import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-myc04',
templateUrl: './myc04.component.html',
styleUrls: ['./myc04.component.css'],
})
export class Myc04Component implements OnInit {
href1 = 'http://www.baidu.com';
href2 = 'http://www.bilibili.com';

constructor() {}

ngOnInit(): void {}
}</pre>
</div>
View Code</div>
组件的HTML文件中用属性绑定语法
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_899565b4-7ab2-441a-a2a1-4b64e4ff7b80" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_899565b4-7ab2-441a-a2a1-4b64e4ff7b80" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_899565b4-7ab2-441a-a2a1-4b64e4ff7b80" class="cnblogs_code_hide">
<pre><p>myc04 works!</p>


<a ="href1">百度</a>
<br />

<a href="{{ href2 }}">哔哩哔哩</a>




<hr />
<button disabled="true">不可用按钮</button>
<button disabled="false">可用按钮</button>
<hr />

<button ="true">不可用按钮</button>
<button ="false">可用按钮</button></pre>
</div>
View Code</div>
<h2>事件_________________________________</h2>
快捷生成组件 ng g c myc05
vue中: v-on:事件名="方法名" 或者 @事件名="方法名"
在组件ts文件中定义一些事件函数
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_03feed5b-d786-469a-bda5-4c623ea6451f" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_03feed5b-d786-469a-bda5-4c623ea6451f" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_03feed5b-d786-469a-bda5-4c623ea6451f" class="cnblogs_code_hide">
<pre>import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-myc05',
templateUrl: './myc05.component.html',
styleUrls: ['./myc05.component.css'],
})
export class Myc05Component implements OnInit {
num = 1;

doAdd() {
this.num++;

// react,小程序:setState 或 setData主动触发刷新
// vue,angular: 自动检测数据变化, 更新DOM
}

constructor() {}

// 这里不是React, 没有this指向问题
show() {
alert('啊,疼!');
}

ngOnInit(): void {}
}</pre>
</div>
View Code</div>
组件的HTML文件中用利用事件触发事件函数
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_745596d6-ca01-4da1-8787-6e6d37f09e6b" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_745596d6-ca01-4da1-8787-6e6d37f09e6b" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_745596d6-ca01-4da1-8787-6e6d37f09e6b" class="cnblogs_code_hide">
<pre><p>myc05 works!</p>



<button (click)="show()">点我</button>

<hr />
<button (click)="doAdd()">{{ num }}</button></pre>
</div>
View Code</div>
<h2>双向数据绑定_____________________________</h2>
快捷生成组件 ng g c myc06
vue中： <input v-model='属性' />
在组件ts文件中定义一些数据
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_2f3c7079-0e61-41eb-a60b-b36b0d04cafe" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_2f3c7079-0e61-41eb-a60b-b36b0d04cafe" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_2f3c7079-0e61-41eb-a60b-b36b0d04cafe" class="cnblogs_code_hide">
<pre>import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-myc06',
templateUrl: './myc06.component.html',
styleUrls: ['./myc06.component.css'],
})
export class Myc06Component implements OnInit {
//定义个name 举例
name = 'comeintobud';

constructor() {}

ngOnInit(): void {}
}</pre>
</div>
View Code</div>
在使用用双向绑定之前需要在app.module.ts中引入模块
<img src="https://img2020.cnblogs.com/blog/1770052/202104/1770052-20210428111509065-2051095331.png" alt="" width="340" height="282" loading="lazy">
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_8fb0e76e-5ca2-4738-b569-5bd00e8ee5a4" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_8fb0e76e-5ca2-4738-b569-5bd00e8ee5a4" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_8fb0e76e-5ca2-4738-b569-5bd00e8ee5a4" class="cnblogs_code_hide">
<pre>// 引入 Forms 模块
import { FormsModule } from '@angular/forms';
@NgModule({
// declarations: 用于注册组件
 declarations: [],
// imports: 引入模块
 imports: ,
providers: [],
bootstrap: ,
})
export class AppModule {}</pre>
</div>
View Code</div>
组件的HTML文件中使用双向绑定对数据做更改
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_32b65ca8-3233-497d-94d6-7e3159b38d6d" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_32b65ca8-3233-497d-94d6-7e3159b38d6d" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_32b65ca8-3233-497d-94d6-7e3159b38d6d" class="cnblogs_code_hide">
<pre><p>myc06 works!</p>




<input type="text" [(ngModel)]="name" />
<p>{{ name }}</p></pre>
</div>
View Code</div>
<h2> 特殊属性_______________________</h2>
快捷生成组件 ng g c myc07
网页内容: vue中: v-html
在组件ts文件中定义一些数据
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_d83385eb-0fb0-4b56-9c6d-f2588cae7ffd" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_d83385eb-0fb0-4b56-9c6d-f2588cae7ffd" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_d83385eb-0fb0-4b56-9c6d-f2588cae7ffd" class="cnblogs_code_hide">
<pre>import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-myc07',
templateUrl: './myc07.component.html',
styleUrls: ['./myc07.component.css'],
})
export class Myc07Component implements OnInit {
//希望将h1编译成浏览器样式
data = '<h1>Hello World!</h1>';

constructor() {}

ngOnInit(): void {}
}</pre>
</div>
View Code</div>
在组件的HTML文件中编译网页内容
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_4410de72-387b-4844-aec1-6b25863976f0" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_4410de72-387b-4844-aec1-6b25863976f0" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_4410de72-387b-4844-aec1-6b25863976f0" class="cnblogs_code_hide">
<pre><p>myc07 works!</p>

<div>

{{ data }}
</div>


<div ="data"></div></pre>
</div>
View Code</div>
<h2>动态样式_______________________</h2>
vue中:
:style="{样式名: 值}"
:class="{样式类名: true/false}" true生效 false无效
快捷生成组件 ng g c myc08
在组件ts文件中定义一些数据
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_7f6b975b-7f14-4eb4-9427-77aef90ff94a" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_7f6b975b-7f14-4eb4-9427-77aef90ff94a" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_7f6b975b-7f14-4eb4-9427-77aef90ff94a" class="cnblogs_code_hide">
<pre>import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-myc08',
templateUrl: './myc08.component.html',
styleUrls: ['./myc08.component.css'],
})
export class Myc08Component implements OnInit {
//动态样式初始值
size = 17;

constructor() { }

ngOnInit(): void { }
}</pre>
</div>
View Code</div>
组件的HTML中写动态样式
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_7bd42525-ed7e-4a9a-a1dc-e474fcd2d102" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_7bd42525-ed7e-4a9a-a1dc-e474fcd2d102" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_7bd42525-ed7e-4a9a-a1dc-e474fcd2d102" class="cnblogs_code_hide">
<pre><p>myc08 works!</p>


<button (click)="size = size + 1">变大{{ size }}</button>

<div style="color: aqua" ="{ fontSize: size + 'px' }">Hello</div>



<div ="{ success: size > 20 && size < 30, danger: size >= 30 }">
Hello Class
</div></pre>
</div>
View Code</div>
在css文件中定义样式便于动态绑定类
<img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_13a27973-f737-4083-a959-ef0aad4c03e3" class="code_img_closed" style="font-family: "Courier New"; font-size: 12px; font-style: italic">View Code
<h2> 条件判断_________________</h2>
vue中: v-if v-else :本质上是切换 DOM 的添加和移除. 消耗更多的资源, 适合不频繁的切换
对应
v-show: 本质是切换 css 的 display 属性, 利用css实现元素的隐藏; 消耗资源少, 适合频繁切换.
快捷生成组件 ng g c myc09
HTML文件
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_baa76fa0-982b-4ecc-9b7d-197e7b3b2e1f" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_baa76fa0-982b-4ecc-9b7d-197e7b3b2e1f" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_baa76fa0-982b-4ecc-9b7d-197e7b3b2e1f" class="cnblogs_code_hide">
<pre><button (click)="score = score - 10" ="score == 0">减10分</button>
<button (click)="score = score + 10" ="score == 100">加10分</button>
<h4>分数:{{ score }}</h4>

<div *ngIf="score < 60">很遗憾, 您的成绩不及格!</div>
<div *ngIf="score >= 60 && score < 80">及格了, 但是仍要继续努力.</div>
<div *ngIf="score >= 80">优秀优秀!</div>

<ng-container *ngIf="score < 60; else xyz">
<h3>很遗憾, 您的成绩不及格!</h3>
</ng-container>

<ng-template #xyz>
<h3>恭喜, 及格了!</h3>
</ng-template></pre>
</div>
View Code</div>
<h2>列表渲染______________________</h2>
vue中: v-for="(item,index) in arr" :key="index"
快捷生成组件 ng g c myc10
ts文件定义数据和函数
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_4c57661d-550b-41ce-bdf3-b04035c52e76" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_4c57661d-550b-41ce-bdf3-b04035c52e76" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_4c57661d-550b-41ce-bdf3-b04035c52e76" class="cnblogs_code_hide">
<pre>import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-myc12',
templateUrl: './myc12.component.html',
styleUrls: ['./myc12.component.css']
})
export class Myc12Component implements OnInit {
data = ['vue', 'angular', 'react', 'ionic', 'jQuery', 'uniapp'];
teachers = [
// 数据项必须自带唯一标识id, 才能配合 trackBy 使用 
{ id: 0, name: '亮亮' },
{ id: 1, name: '然然' },
{ id: 2, name: '东东' },
{ id: 3, name: '铭铭' },
{ id: 4, name: '小新' },
];
trackFunc = (index, item) => {
return item.id;
// return index; 也可以 
};
// 自定义函数把数字转数组 
range(num: number) {
// TypeScript: 静态类型声明 
// num: number 代表参数num 是数字类型 
const arr = [];
for (let i = 1; i <= num; i++) {
 arr.push(i);
}
return arr;
}

constructor() { }

ngOnInit(): void {
}

}</pre>
</div>
View Code</div>
HTML文件渲染
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_eb665fa7-5f30-4bb8-8239-c07bec6f500b" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_eb665fa7-5f30-4bb8-8239-c07bec6f500b" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_eb665fa7-5f30-4bb8-8239-c07bec6f500b" class="cnblogs_code_hide">
<pre><ul>

<li *ngFor="let item of data">{{ item }}</li>
</ul>

<ul>
<li *ngFor="let item of data; let i = index">
 <span>{{ i }}--</span>
 <span>{{ item }}</span>
</li>
</ul>





<ul>

<li *ngFor="let item of teachers; trackBy: trackFunc">
 {{ item.name }}
</li>
</ul>
<button *ngFor="let item of range(4)">{{ item }}</button></pre>
</div>
View Code</div>
 
综上写个例子
快捷生成组件 ng g c work
ts文件
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_b68d7dc5-ed09-43ac-bef3-86cf831e62ac" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_b68d7dc5-ed09-43ac-bef3-86cf831e62ac" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_b68d7dc5-ed09-43ac-bef3-86cf831e62ac" class="cnblogs_code_hide">
<pre>import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-work',
templateUrl: './work.component.html',
styleUrls: ['./work.component.css'],
})
export class WorkComponent implements OnInit {
todo = '';

todoList = ['吃饭', '睡觉', '打亮亮'];

doAdd() {
this.todoList.push(this.todo);

this.todo = '';
}

// TypeScript: 静态类型声明
doDel(index: number) {
// splice(a,b,c): 从序号a位置删除b个元素, 把c元素加入到a位置
this.todoList.splice(index, 1);
}

constructor() {}

ngOnInit(): void {}
}</pre>
</div>
View Code</div>
HTML文件(注意双向绑定需要在app.module.ts中引入FromModule模块)
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_2dfd8214-5162-4dd9-9546-3a0e9b6d3350" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_2dfd8214-5162-4dd9-9546-3a0e9b6d3350" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_2dfd8214-5162-4dd9-9546-3a0e9b6d3350" class="cnblogs_code_hide">
<pre><div>
<div>

<input type="text" placeholder="请输入待办事项" [(ngModel)]="todo" />
<button ="todo.trim().length == 0" (click)="doAdd()">确定</button>
</div>
<div>
<ul>
 <li *ngFor="let item of todoList; let i = index">
 <span>{{ item }}</span>
 <button (click)="doDel(i)" style="margin-left: 50px">删除</button>
 </li>
</ul>
</div>
<div>
<h3 *ngIf="todoList.length == 0">暂无待办事项</h3>



<h3 ="todoList.length != 0">暂无待办事项</h3>
</div>
</div></pre>
</div>
View Code</div>
  
来源：https://www.cnblogs.com/CIBud/p/14713003.html

頁: [1]

琼殿技术论坛's Archiver

Angular 入门(一)