Angular
基础知识
使用{{…}}在标签外获取变量 ;
使用*ngFor进行遍历 ;
在属性中使用的变量,使用[]括住属性名 ;
使用*ngIf可以进行判断,决定标签是否显示
使用(…)完成事件的绑定
<div *ngFor =’let 自定义 of 数组变量名 ’>
<!—这时链接的title属性可以接收变量,且属性中的变量不用用{{…}}包含起来-->
<a [title] = “ 自定义.成员名 + ’字符串拼接’ ”>
<p *ngIf =“ 自定义.成员名 “ >
Description: {{ 自定义.成员名 }}
</p>
<!—把 button 的 click 事件绑定到我们替你定义好的 share() 方法上-->
<button (click)="share()"> Share </button>
<h3>{自定义.成员名}</h3>
</div>
手动创建组件
Import { Component } from ‘angular/core’; //引入Component
@Component({ //编写组件内容的装饰器
selector: ‘my-compoent’ //选择器，即自定义组件的标签名
templateUrl: ‘./index.html’ //组件模板的地址，也可以去掉url直接编写内容
styleUrls: ‘./index.css’ //组件样式的地址，也可以去掉url直接编写内容
})
注意,这个@ Component依然是修饰class的注解,不是单独使用
父子组件之间的数据通信
子组件组件
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-product-alerts',
template: '
<p *ngIf="product.price > 700"> ]\
<button>Notify Me</button> \
</p>
',
styleUrls: ['./product-alerts.component.css'] })
export class ProductAlertsComponent implements OnInit {
@Input() product;
constructor() { }
ngOnInit() { }
}
通过属性绑定把当前商品作为输入传给组件
<!--[product]是子组件中的属性,而”product”是父组件传入的值 -->
<app-product-alerts [product]="product">
</app-product-alerts>
理解视图
组件和其关联模板定义了一个视图（可以理解为组件模板的实例化，代码内容在惠html文件中）。视图中各个元素的属性可以动态修改以响应用户的操作，而这些元素的结构（DOM的数量或顺序）则不能。你可以通过在它们的视图容器中插入、移动或移除内嵌视图来修改这些元素的结构。
例子：地址 www.space.com/list/#/page1 用#标注了的地址数据，浏览器不解析，实际的资源地址依旧是，地址 /list。因此通过后面的数据，更改单页网页的视图，在同一个网页地址中获得不同的显示效果
路由
路由器能让你在不同的视图中显示产品的详情，每个产品都有自己的 URL。当用户执行应用任务时，路由器可以从一个视图导航到另一个视图（但在同一个页面）。比如：
生命周期事件
钩子函数,即组件某一时段完成某个生命周期后自动执行的函数,可以通过实现钩子接口实现某个生命周期要做的事情
peek-a-boo.component.ts
@Directive( {selector:[appSpy]}) // Directive注解,表明该类是一个属性指令
export class MyCompoent implements OnInit{ //实现OnInit接口,实现ngOnInit()方法
ngOnInit() { this.logger.log(‘实现了初始化OnInit接口’); }
}
使用方式
<div appSpy class="heroes"> {{hero}} </div>
使用 ngOnInit() 方法执行以下初始化任务。
使用ngOnDestroy() 方法执行清理任务
使用ngOnChanges方法检测输入属性变化
视图封装模式
组件的 CSS 样式被封装进了自己的视图中，而不会影响到应用程序的其它部分。
组件之间的交互
@Input允许父组件更新子组件中的数据
子组件中用@Input修饰属性，表示该属性可以从父组件中获取值
import { Component } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'app-hero-child',
template: ` <h3>{{ children_hero.name}} </h3> `
})
export class ChildComponent {
@Input() children_hero: Hero;//表示这个变量可以接收父组件的数据
}
父组件代码
import { Component } from '@angular/core';
import { HEROES } from './hero';
@Component({
selector: 'app-hero-parent',
//模板中使用了子组件，而子组件属性children_hero被父组件的hero赋值
template: ` <h2> {{heroes.length}} heroes</h2> \
<app-hero-child *ngFor="let hero of heroes"\
[children_hero]="hero" >\
</app-hero-child> ` })
export class HeroParentComponent {
heroes = HEROES;
}
使用一个输入属性的 set，以拦截父组件中值的变化，并采取行动。
export class NameChildComponent {
//get修饰一个name函数，自动创建了一个name属性，子组件可直接使用[name]
@Input() get name(): string { return this._name; }
// set修饰一个name函数，则组件name属性发生变动时，自动调用set name()函数
set name(name: string) {
this._name = (name && name.trim()) || '<no name set>';
}
private _name = ''; //_name只是一个临时变量，用于返回值
}
继承@ OnChanges实现ngOnChanges()来截听输入属性值的变化，注意之监听@Input修饰的数据
父组件监听子组件事件
子组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。
………
@Component({
selector: 'app-voter',
template: ` <h4>{{name}}</h4>
<button (click)="vote(true)"[disabled]="didVote">Agree</button>
<button (click)="vote(false)"[disabled]="didVote">Disagree</button> `
})
export class VoterComponent {
@Input() name: string;
@Output() voted = new EventEmitter<boolean>();
didVote = false;
//使用voted属性的emits方法向父组件发送数据
vote(agreed: boolean) {
this.voted.emit(agreed);
this.didVote = true;
} }
父组件绑定了一个事件处理器(onVoted())，用来响应子组件的事件($event)
@Component({
selector: 'app-vote-taker',
template: ` <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
<app-voter *ngFor="let voter of voters" [name]="voter"
//使用()完成事件的绑定
(voted)="onVoted($event)">
</app-voter> ` })
export class VoteTakerComponent {
agreed = 0;
disagreed = 0;
voters = ['Narco', 'Celeritas', 'Bombasto'];
onVoted(agreed: boolean) {
agreed ? this.agreed++ : this.disagreed++;
} }
父组件与子组件通过本地变量互动
父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法。
子组件
……
export class CountdownTimerComponent implements OnDestroy {
var1= 0;
var2 = '';
ngOnDestroy() { …… }
start() { …… }
stop() { …… }
}
父组件要想使用子组件中的内容时，使用#代表模板本地变量。，可以理解为子组件的别名
import { Component } from '@angular/core';
import { CountdownTimerComponent } from './countdown-timer.component'; @Component({
selector: 'app-countdown-parent-lv',
template: ` <h3>Countdown to Liftoff (via local variable)</h3>
<button (click)="timer.start()">Start</button>
<button (click)="timer.stop()">Stop</button>
<div class="seconds">{{timer.seconds}}</div>
<app-countdown-timer #timer></app-countdown-timer> `,
styleUrls: ['../assets/demo.css'] })
export class CountdownLocalVarParentComponent { }
父组件调用@ViewChild()
以上方法是父组件的模板中使用了子组件的属性方法，但是
如果父组件的类需要读取子组件的属性值或调用子组件的方法，就不能使用本地变量方法。
当父组件类需要这种访问时，可以把子组件作为 ViewChild，注入到父组件里面。
@Component({
selector: 'app-countdown-parent-vc',
template: ` <h3>Countdown to Liftoff (via ViewChild)</h3>
<button (click)="start()">Start</button>
<button (click)="stop()">Stop</button>
<div class="seconds">{{ seconds() }}</div>
<app-countdown-timer></app-countdown-timer> `,
styleUrls: ['../assets/demo.css'] })
export class CountdownViewChildParentComponent implements AfterViewInit{ @ViewChild(CountdownTimerComponent) private timerComponent: CountdownTimerComponent; seconds() { return 0; } ngAfterViewInit() { // Redefine `seconds()` to get from the `CountdownTimerComponent.seconds` ... // but wait a tick first to avoid one-time devMode // unidirectional-data-flow-violation error setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0); } start() { this.timerComponent.start(); } stop() { this.timerComponent.stop(); } }
父子组件通过服务来通讯
样式
:host 伪类选择器，用来选择宿主组件中的元素
:host { display: block; border: 1px solid black; }
指令
使用 ComponentFactoryResolver 来动态添加组件。
在添加组件之前，要定义一个锚点来告诉 Angular 要把组件插入到什么地方
模板
管道
自定义管道
用@Pipe修饰类
@Pipe({name: 'exponentialStrength'})
<app-countdown-timer>
是项目太辣鸡了吗?