创建组件:

ng g component components/news

一、创建 angualr 组件.............................................................................................................. 1
二、Angular 绑定数据...............................................................................................................2
二、绑定属性.............................................................................................................................2
三、数据循环 *ngFor............................................................................................................. 3
四、条件判断 *ngIf................................................................................................................ 3
四、 *ngSwitch..........................................................................................................................4
五、执行事件 (click)=”getData()”........................................................................................ 4
七、表单事件.............................................................................................................................5
八、双向数据绑定.....................................................................................................................5
九、 [ngClass]、[ngStyle]..........................................................................................................6
十、 管道...................................................................................................................................7
一、创建 angualr 组件
Angular CLI:
https://cli.angular.io/
创建组件
ng g component components/header
使用组件
<app-header></app-header>
 
二、Angular 绑定数据
1. 数据文本绑定
{{}}
<h1>
{{title}}
</h1>
<div>
1+1={{1+1}}
</div>
2.绑定 html
this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"
<div [innerHTML]="h"></div>
 
二、绑定属性
<div [id]="id" [title]="msg">调试工具看看我的属性</div>
 
三、数据循环 *ngFor
1、*ngFor 普通循环
<ul>
<li *ngFor="let item of list">
{{item}}
</li>
</ul>
2、循环的时候设置 key
<ul>
<li *ngFor="let item of list;let i = index;">
{{item}} --{{i}}
</li>
</ul>
2. template 循环数据
<ul>
<li template="ngFor let item of list">
{{item}}
</li>
</ul>
四、条件判断 *ngIf
<p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p>
<p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p>
 
四、*ngSwitch
<ul [ngSwitch]="score">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="2">订单已经确认</li>
<li *ngSwitchCase="3">已发货</li>
<li *ngSwitchDefault>无效</li>
</ul>
五、执行事件 (click)=”getData()”
<button class="button" (click)="getData()">
点击按钮触发事件
</button>
<button class="button" (click)="setData()">
点击按钮设置数据
</button>
getData(){ /*自定义方法获取数据*/
//获取
alert(this.msg);
}
setData(){
//设置值
this.msg='这是设置的值';
}
七、表单事件
<input type="text" (keyup)="keyUpFn($event)"/>
<input type="text" (keyup)="keyUpFn($event)"/>
keyUpFn(e){
console.log(e)
}
八、双向数据绑定
<input [(ngModel)]="inputValue">
注意引入:FormsModule
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
NewsComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
使用:
<input type="text" [(ngModel)]="inputValue"/>
{{inputValue}}
九、[ngClass]、[ngStyle]
[ngClass]:
<div [ngClass]="{'red': true, 'blue': false}">
这是一个 div
</div>
public flag=false;
<div [ngClass]="{'red': flag, 'blue': !flag}">
这是一个 div
</div>
public arr = [1, 3, 4, 5, 6];
<ul>
<li *ngFor="let item of arr, let i = index">
<span [ngClass]="{'red': i==0}">{{item}}</span>
</li>
</ul>
[ngStyle]:<div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>
public attr='red';
<div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>
十、管道
public today=new Date();
<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>
其他管道:
http://bbs.itying.com/topic/5bf519657e9f5911d41f2a34

003——angular 组件 以及组件里面的模板的更多相关文章

  1. Angular动态创建组件之Portals

    这篇文章主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的知识点,如:Angular多级依赖注入.ViewContainerRef,Por ...

  2. [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)

    前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...

  3. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  4. ASP.NET自定义控件组件开发 第五章 模板控件开发

    原文:ASP.NET自定义控件组件开发 第五章 模板控件开发 第五章 模板控件开发 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接 ...

  5. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  6. Angular组件——父子组件通讯

    Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件 ...

  7. angular 有关侦测组件变化的 ChangeDetectorRef 对象

    我们知道,如果我们绑定了组件数据到视图,例如使用 <p>{{content}}</p>,如果我们在组件中改变了content的值,那么视图也会更新为对应的值. angular ...

  8. 【Angular】关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep

    [Angular]关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep css修改:无效 .ant-input-affix-wrapper .ant-input:not ...

  9. Angular第三方UI组件库------ionic

    一.Angular  UI组件库  ------------ionic 1. 官网:https://ionicframework.com 文档:https://ionicframework.com/d ...

随机推荐

  1. .net框架-栈(Stack)

    栈(Stack) 栈代表一个后进先出的集合 栈元素为Object类型 .net框架提供Stack<T>泛型栈类 压栈(Push)和出栈(Pop)是栈的基本操作,压栈入栈顶,出栈也出栈顶. ...

  2. 多线程实现的方式一继承Thread

    实现方法一:继承Thread类 package thread; /** * @function 多线程继承Thread类 * @author hj */ public class Threads ex ...

  3. 四大网络VGGNet

    一.特点 1.对AlexNet改进,在第一个卷积层用了更小的卷积核和stride 2.多尺度训练(训练和测试时,采用整张图的不同尺度) 由此,VGG结构简单,提取特征能力强,应用场景广泛 由单尺度测试 ...

  4. (转载) 从0开始搭建SQL Server AlwaysOn 第三篇(配置AlwaysOn)

    这一篇是从0开始搭建SQL Server AlwaysOn 的第三篇,这一篇才真正开始搭建AlwaysOn,前两篇是为搭建AlwaysOn 做准备的 步骤 这一篇依然使用step by step的方式 ...

  5. Linux 一款免费的shell工具 MobaXterm_Personal

    一款免费的shell工具 MobaXterm_Personal

  6. (尚006)Vue计算属性之set与get

    test004.html <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...

  7. Spoj PRIME1 - Prime Generator

    题意翻译 求给定的两个数之间的素数 Translated by @kaiming 题目描述 Peter wants to generate some prime numbers for his cry ...

  8. 洛谷P5098 洞穴里的牛之三

    题目 贪心,可以用分类讨论的方法,可以得出如果\(n^2\)枚举则会过不了,而我们观察原题中的式子,有: \(∣x1−x2∣+∣y1−y2∣\) 发现式子中的绝对值很恶心,而考虑如果没有绝对值的话会有 ...

  9. 关于nginx反代jenkins报错 反向代理设置有误

    官方文档地址: https://wiki.jenkins.io/display/JENKINS/Running+Jenkins+behind+Nginx 直接解决的配置文件吧. 这是使用子域名,不使用 ...

  10. 各种DTO类最好有 无参数的构造方法

    以一下这个类为例 @Getter @Setter @ToString class Person { private String s; public Person(String s) { this.s ...