Angular

1、数据绑定的四种形式：

（1）插值? ??<p>{{title}}</p>

（2）属性绑定? ? ?<img [src]="userUrl"/>

（3）事件绑定? ? ?<button (click)=‘onSave()‘>点击</button>

（4）双向绑定? ? ?<input [(ngModel)]=‘title‘/>

? ? ? ? 在双向绑定中，数据属性值通过属性绑定从组件流到输入框，当修改输入框内容时通过事件绑定流回组件，把属性值设为最新值。

?

选择属性绑定还是插值？

　　当渲染的数据类型是字符串时，倾向于可读性更好的插值；但是当数据类型不是字符串时，必须用属性绑定了。

属性绑定与attribute绑定的区别？

　　用属性绑定来设置元素的属性总是好于用字符串设置attribute，但是当元素没有属性可绑时，就必须用attribute绑定。

? ? ? ?如：? colspan不是td的属性

<tr><td [attr.colspan]="1+1">One-Two</td></tr>

CSS类绑定

• 全有或全无的替换型绑定

　　　<div class=‘bad curly special‘ [class]=‘isTrue‘></div>

• 绑定到特定类名? ? 单个class的添加与移除

　　　<div [class.special]=‘isTrue‘></div>

? ? ? ? ? ?同时添加或移除多个class

　　? ?<div [ngClass]="{‘background‘:isBg,‘fontColor‘:isFontColor}"></div>

样式绑定

• 单个样式绑定? ?<button [style.color]="isSpecial?‘red‘:‘green‘"></button>

2、指令

（1）结构型指令：通过添加、移除或替换DOM来修改布局。如 *ngIf、*ngFor

（2）属性型指令：会修改现有元素的外观或行为。 如 NgClass、NgStyle、NgModel

为什么要给结构型指令加上“*”？

　　星号是用来简化更复杂语法的“语法糖”，从内部实现来说，Angular把*ngIf属性翻译成了一个<ng-template>元素，并用它来包裹宿主元素

　　　如<div *ngIf="hero">hero</div>? =======》

　　　　<ng-template [ngIf]="hero">
　　　　　　<div>hero</div>
　　　　</ng-template>

*ngIf有else

<div *ngIf="display else noData"></div>
<ng-template #noData></ng-template>

在Angular中一个标签上不能同时使用两个指令，可以通过在外层添加一个<ng-container>来解决

?

3、获取用户数据的方式：

使用Angular的模板引用变量，这些变量提供了从模板中直接访问元素的能力，在标识符前加上井号# 就能直接声明一个模板引用变量了。

<input #box/>
<p>{{box.value}}</p>

//按键事件过滤
<input #box (keyup.enter)="onEnter(box.value)"/>
onkey(value:string){
　　this.value=value;
}

通过$event对象取得用户输入

<input (keyup)="onkey($event)"/>
onkey(event:any){
    this.value=event.target.value;
}

但是通过$event是靠不住的做法，反对把整个dom事件传入方法中，因为这样组件会知道太多模板的信息，这样就违反了模板和组件之间的分离关注原则了。

?

4、组件间的交互的方式

（1）父---->子

子组件若接收来自父组件传入的消息，必须定义一个输入属性，该属性通过Input装饰器修饰的。

//子组件  child.ts
@Input() private message:string;
//父组件 html
<child [message]="msgToChild"></child>

（2）子----->父

通过输出接口完成

//子组件 child.ts
@Output() private outer=new EventEmitter<string>();
sendToParent(){
    this.outer.emit(‘message from child‘);
}
//父组件
//. html
<child (outer)="recieve($event)"></child>     
//.ts    
private msgFromChild:string;
recieve($e:any){
    this.msgFromChild=$e;
}

（3）父子组件通过本地变量互动

父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法，但是，可以在父组件的模板中，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法。

//html文件
<child #children></child> //子组件
<button (click)="children.start()"></button>

（4）@viewChild()

两种用法：1、读取子组件

如果父组件的类需要读取子组件的值或方法，就不能使用本地变量的方法了。当父组件需要这种访问时，可以把子组件作为viewChild注入到父组件中

//html文件
<child></child> //子组件
<button (click)="start()"></button>
//ts文件
import { child} from ‘./components/child.component‘;
@viewChild(child);
private sonComponent:child;
start(){
      this. sonComponent.start();
}

@viewChild()的另一种用法：2、获取当前组件视图的单个元素

//.html
<input #name/>
//.ts
@viewChild(‘name‘) myName:ElementRef;
this.myName.nativeElement.focus();

?

5、路由

<router-outlet></router-outlet>把要显示在这个出口处的组件显示在这里。

路由跳转

<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
<a routerLink="[‘/heroes‘]">Heroes</a>
<a routerLink="[/home]"+row.id>Heroes</a>//根据id跳转
//routerLinkActive表示当链接激活时添加“active”类

this.router.navigate([‘/home‘]);  在ts文件中

?

根据参数跳转路由：

{
    path:‘home/:id‘,component:HomeComponent    
}
//获取参数id
//(1)
constructor(private route:ActivatedRoute){
   route.params.subscribe(params=>{this.id=params[‘id‘]})
}
//(2)
constructor(private route:ActivatedRoute){}
const id=this.route.snapshot.paramMap.get(‘id‘);

?

6、管道

把数据作为输入，然后转换它，给出期望的输出。

<p>Hero`s birthdat is {{birthday | date}}</p>

让组件的birthday值通过管道操作符（|）流动到右侧的date管道函数中，所有管道都会用这种方式工作。

?

7、服务与依赖注入

为什么要用服务？

通常需要对访问的数据做后处理、添加错误处理器，还可能加一些重试逻辑，以便应对网络问题。如果直接写在组件中，会因为这些数据方式的细节而变得杂乱不堪，组件变得难以理解，难以测试，并且这些数据访问逻辑无法被复用，也无法标准化，所以把数据展示逻辑与数据访问逻辑分开。

Angular把组件与服务区分开，以提高模块性和复用性。通过把组件中和视图相关的功能与其他类型的处理分离开，可以使组件类更精简、高效。

组件应该把诸如从服务器获取数据、验证用户输入等工作委托给服务。

依赖注入：是组件引入外部构建（如服务）的一种机制。