一、科普概要说明
- 我们常说的 Angular 1 是指
AngularJS； 从Angular 2 开始已经改名了。不再带有JS，只是单纯的Angular； - Angular 1.x 是基于
JavaScript的框架，Angular2后是基于TypeScript来写的
有兴趣的朋友可以了解下NG-ZORRO Ant Design of Angularhttps://ng.ant.design/docs/introduce/zh - Angular 官方文档 地址
https://angular.io/ - 开发脚手架
https://cli.angular.io/ - TypeScript 入门文档
https://www.typescriptlang.org/
初步了解下TypeScript的语法
二、详解部分内置指令的变化
(1)、Angular(
ng-if) -- Angular2(*ngIf)
语法 (2)、Angular(ng-repeat) -- Angular2(*ngFor)
ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象
Angular 2.x 中不存在 ng-repeat 指令，取而代之的是 ngFor 指令。它们的语法非常相似，
但需要注意的一点在遍历集合是，Angular 2 使用 of 代替了 in 。
{{x.Name}}
{{x.Country}}
(3)、Angular(ng-switch) -- Angular2(ngSwitch)
ng-switch 指令根据表达式显示或隐藏对应的部分。
对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。
你可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。
作用 防止条件复杂的情况导致过多的使用 ngIf。
age = 10
age = 20
age = 18
(4)、Angular(ng-style) -- Angular2(ngStyle)
ng-style 指令为 HTML 元素添加 style 属性。
ng-style 属性值必须是对象，表达式返回的也是对象。对象由 CSS 属性和值组成，即 key=>value 对。
使用动态值给特定的 DOM 元素设定 CSS 属性。
菜鸟教程
(5)、Angular(ng-class) -- Angular2(ngClass)
ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。
ng-class 指令的值可以是字符串，对象，或一个数组。
如果是字符串，多个类名使用空格分隔。
如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。
如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。
Welcome Home!
I like it!
// 例子1
// 例子2
// 例子3
在第一个例子中，如果isActive为真，则active类被应用到那个元素上。
还可以同时指定多个类，例如第二个例子。
Angular还有类绑定，它是单独添加或移除一个类的好办法，就像第三个例子中展示的。
(6)、Angular(ng-click) -- Angular2((click))
HTML 元素被点击后需要执行的操作
(7)、Angular(ng-model) -- Angular2(ngModel)
(8)、Angular(ng-value) -- Angular2(ngModel)
ng-value 指令用于设置 input 或 select 元素的 value 属性。
最后科普下Angular 父子组件之间参数传递的问题 （@input @output :在子组件引入父组件的元素时，@Input往往是值，@Output是指事件）
父组件到子组件：父组件用属性绑定将值传入，子组件通过@Input来接收。
// 父组件
import { Component } from '@angular/core';
@Component({
selector: 'hero-parent',
template: ` heroes
`
})
export class HeroParentComponent {
heroes = [{
name: 'John'
}, {
name: 'Lily'
}];
}
// 子组件
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'hero-child',
template: `
{{hero.name}}
`
})
export class HeroChildComponent {
@Input() hero: Hero;
}
子组件到父组件：子组件自定义事件用@Output传出，父组件用事件绑定获取。
// 子组件
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'my-voter',
template: `
{{name}}
`
})
export class VoterComponent {
@Output() onVoted = new EventEmitter();
vote(agreed: boolean) {
this.onVoted.emit(agreed);
}
}
// 父组件
import { Component } from '@angular/core';
@Component({
selector: 'vote-taker',
template: `
Should mankind colonize the Universe?
Agree: {{agreed}}, Disagree: {{disagreed}}
`
})
export class VoteTakerComponent {
agreed = 0;
disagreed = 0;
voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
onVoted(agreed: boolean) {
agreed ? this.agreed++ : this.disagreed++;
}
}
父组件的类需要读取子组件的属性值或调用子组件的方法：子组件作为ViewChild，注入到父组件里面