Angular

一夜尘埃 發表於 2019-7-5 11:20:00

<h2>1、数据绑定的四种形式：</h2>
（1）插值    {{title}}
（2）属性绑定     <img ="userUrl"/>
（3）事件绑定     <button (click)='onSave()'>点击</button>
（4）双向绑定     <input [(ngModel)]='title'/>
        在双向绑定中，数据属性值通过属性绑定从组件流到输入框，当修改输入框内容时通过事件绑定流回组件，把属性值设为最新值。
 
选择属性绑定还是插值？
　　当渲染的数据类型是字符串时，倾向于可读性更好的插值；但是当数据类型不是字符串时，必须用属性绑定了。
属性绑定与attribute绑定的区别？
　　用属性绑定来设置元素的属性总是好于用字符串设置attribute，但是当元素没有属性可绑时，就必须用attribute绑定。
       如：  colspan不是td的属性
<div class="cnblogs_code">
<pre><tr><td ="1+1">One-Two</td></tr></pre>
</div>
CSS类绑定
<ul>
<li>全有或全无的替换型绑定</li>
</ul>
　　　<div class='bad curly special' ='isTrue'></div>
<ul>
<li>绑定到特定类名    单个class的添加与移除</li>
</ul>
　　　<div ='isTrue'></div>
           同时添加或移除多个class
　　   <div ="{'background':isBg,'fontColor':isFontColor}"></div>
样式绑定
<ul>
<li>单个样式绑定   <button ="isSpecial?'red':'green'"></button></li>
</ul>
<h2>2、指令</h2>
（1）结构型指令：通过添加、移除或替换DOM来修改布局。如 *ngIf、*ngFor
（2）属性型指令：会修改现有元素的外观或行为。如 NgClass、NgStyle、NgModel
2.1、为什么要给结构型指令加上“*”？
　　星号是用来简化更复杂语法的“语法糖”，从内部实现来说，Angular把*ngIf属性翻译成了一个<ng-template>元素，并用它来包裹宿主元素
　　　如<div *ngIf="hero">hero</div>  =======》
　　　　<ng-template ="hero"> 　　　　　　<div>hero</div> 　　　　</ng-template>
2.2、*ngIf有else
<div class="cnblogs_code">
<pre><div *ngIf="display else noData"></div>
<ng-template #noData></ng-template></pre>
</div>
在Angular中一个标签上不能同时使用两个指令，可以通过在外层添加一个<ng-container>来解决
 
2.3、<ng-container> VS<ng-template> VS <ng-content>
<ng-container>渲染所包含的模板内容，不包含自身
<div class="cnblogs_code">
<pre><div>
<ng-container>
 Hello World!
</ng-container>
</div>


<div>
Hello World!
</div></pre>
</div>
<ng-template>它不会直接渲染任何内容，主要是配合其他的结构型指令一起使用
<div class="cnblogs_code">
<pre><ng-template>
Hello World!
</ng-template>

</pre>
</div>
<ng-content>使得这个组件能接收外部投射进来的内容，也就是说组件最终呈现的内容不仅仅是本身定义的那些。
父组件在调用子组件时，还可以在子组件里添加内容，然后在子组件中使用<ng-content>显示那部分内容到该处。
<div class="cnblogs_code">
<pre>//父组件中调用子组件 app-with-title
<app-with-title>
<div>hello</div>
<div>world</div>
</app-with-title>
//子组件
<div>title</div>
<ng-content></ng-content>

// 子组件实际渲染的结果是
<div>title</div>
<div>hello</div>
<div>world</div></pre>
</div>
2.4、ng-container 只会展示包含的内容
下面的实例，很好的展示了 ng-container 的用法；需求是只展示奇数的数据，如果是同时使用 ngFor 和 ngIf 会报错
<div class="cnblogs_code">
<pre><ul>
<li *ngFor="let item of list; let odd = odd" * ngIf="odd">
 {{ item }}
</li>
</ul></pre>
</div>
会报错，*开头的指令，一个元素只能使用一次
<div class="cnblogs_code">
<pre><ul>
<ng-container *ngFor="let item of list; let odd = odd">
 <li *ngIf="odd">{{ item }}</li>
</ng-container>
</ul></pre>
</div>
2.5、*ngTemplateOutlet
<div class="cnblogs_code">
<pre><ng-template #data>
Hello World
</ng-template>

<div *ngTemplateOutlet="data"></div></pre>
</div>
类似 angularJS 里面的 include，加载对应的模块代码块，不过更强大，像是调用一个函数，可以传参
在使用 *ngTemplateOutlet 的时候，可以加上 context 代表要传入 ng-template 的参数，比如
<div class="cnblogs_code">
<pre><div *ngTemplateOutlet="data; context: {$implicit: {value: 1}}"></div>
//这个 $implicit 是一个固定用法，就像es6 module中的export default一样， $implicit 后面的值，会被当做传入 ng-template 的默认参数

//在 ng-template 里只需要使用 let-xxx 的方式，就可以接收到这个传入的默认参数
<ng-template #data let-xxx>
{{ xxx | json }}
</ng-template>

<div *ngTemplateOutlet="data; context: {$implicit: {value: 1}}"></div>
//使用 let-xxx，ng-template 內部就有一个 xxx 变量，这里 xxx 的值就是 {value : 1}</pre>
</div>
ng-template 传入多个参数
$implicit 的方式实际上就是 let-xxx="$implicit"，如果有多个参数需要传入，可以这样：
<div class="cnblogs_code">
<pre><ng-template #data let-xxx let-another="another">
<div>{{ xxx | json }}</div>
<div>{{ another | json }}</div>
</ng-template>

<div
*ngTemplateOutlet="data; context: {$implicit: {value: 1}, another: {value: 2}}"
></div></pre>
</div>
 
 
 
<h2>3、获取用户数据的方式：</h2>
使用Angular的模板引用变量，这些变量提供了从模板中直接访问元素的能力，在标识符前加上井号# 就能直接声明一个模板引用变量了。
<div class="cnblogs_code">
<pre><input #box/>
{{box.value}} //按键事件过滤 <input #box (keyup.enter)="onEnter(box.value)"/> onkey(value:string){ 　　this.value=value; }</pre>
</div>
通过$event对象取得用户输入
<div class="cnblogs_code">
<pre><input (keyup)="onkey($event)"/>
onkey(event:any){
this.value=event.target.value;
}</pre>
</div>
但是通过$event是靠不住的做法，反对把整个dom事件传入方法中，因为这样组件会知道太多模板的信息，这样就违反了模板和组件之间的分离关注原则了。
 
<h2>4、组件间的交互的方式</h2>
（1）父---->子
子组件若接收来自父组件传入的消息，必须定义一个输入属性，该属性通过Input装饰器修饰的。
<div class="cnblogs_code">
<pre>//子组件child.ts
@Input() private message:string;
//父组件 html
<child ="msgToChild"></child></pre>
</div>
（2）子----->父
通过输出接口完成
<div class="cnblogs_code">
<pre>//子组件 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;
}</pre>
</div>
（3）父子组件通过本地变量互动
父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法，但是，可以在父组件的模板中，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法。
<div class="cnblogs_code">
<pre>//html文件 <child #children></child> //子组件
<button (click)="children.start()"></button></pre>
</div>
（4）@viewChild()
两种用法：1、读取子组件
如果父组件的类需要读取子组件的值或方法，就不能使用本地变量的方法了。当父组件需要这种访问时，可以把子组件作为viewChild注入到父组件中
<div class="cnblogs_code">
<pre>//html文件
<child></child> //子组件
<button (click)="start()"></button>
//ts文件
import { child} from './components/child.component';
@viewChild(child);
private sonComponent:child;
start(){
 this. sonComponent.start();
}</pre>
</div>
@viewChild()的另一种用法：2、获取当前组件视图的单个元素
<div class="cnblogs_code">
<pre>//.html
<input #name/>
//.ts
@viewChild('name') myName:ElementRef;
this.myName.nativeElement.focus();</pre>
</div>
 （5）同级组件间通信
<ul>
<li>共用服务</li>
</ul>
　　两个组件同时调用某个服务，需要发送数据的组件调用该服务的方法，需要接收该信息的组件，可以定义一个观察者对象，监听数据变化。
<ul>
<li>$rootscope实现作用域间通信</li>
</ul>
 
<h2>5、路由</h2>
<router-outlet></router-outlet>把要显示在这个出口处的组件显示在这里。
路由跳转
<div class="cnblogs_code">
<pre><a routerLink="/heroes" routerLinkActive="active">Heroes</a>
<a routerLink="['/heroes']">Heroes</a>
<a routerLink=""+row.id>Heroes</a>//根据id跳转
//routerLinkActive表示当链接激活时添加“active”类

this.router.navigate(['/home']);在ts文件中</pre>
</div>
 
根据参数跳转路由：
<div class="cnblogs_code">
<pre>{
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');</pre>
</div>
 
<h2>6、管道</h2>
把数据作为输入，然后转换它，给出期望的输出。
<div class="cnblogs_code">
<pre>Hero`s birthdat is {{birthday | date}}</pre>
</div>
让组件的birthday值通过管道操作符（|）流动到右侧的date管道函数中，所有管道都会用这种方式工作。
 
<h2>7、服务与依赖注入</h2>
为什么要用服务？
通常需要对访问的数据做后处理、添加错误处理器，还可能加一些重试逻辑，以便应对网络问题。如果直接写在组件中，会因为这些数据方式的细节而变得杂乱不堪，组件变得难以理解，难以测试，并且这些数据访问逻辑无法被复用，也无法标准化，所以把数据展示逻辑与数据访问逻辑分开。
Angular把组件与服务区分开，以提高模块性和复用性。通过把组件中和视图相关的功能与其他类型的处理分离开，可以使组件类更精简、高效。
组件应该把诸如从服务器获取数据、验证用户输入等工作委托给服务。
依赖注入：是组件引入外部构建（如服务）的一种机制。
 
<h2>8、Angular双向绑定实现原理</h2>
Angular在scope模型上设置了一个监听队列，用来监听数据变化并更新视图。每次绑定一个数据或事件时angular就会往$watch队列中插入一条$watch，用来检测它监听的模型里是否有变化的内容。当浏览器接收到可以被Angular context处理的事件时，就会触发$digest循环，遍历所有的$watch检查其属性和值是否发生变化，最后更新DOM。
实现方法：
（1）每个双向绑定的元素都有一个watcher；
（2）在某些事件发生时，调用digest对脏数据进行检测，这些事件有表单内容发生变化、Ajax请求响应、单击按钮执行回调函数等。
（3）脏数据检测，会检测到rootscope下所有被watcher监控的元素。 $digest函数就是脏数据检测函数。
如：
<ul>
<li>当我们点击按钮时，浏览器接收一个事件，进入angular context。</li>
<li>$digest循坏开始执行，查询每个$watch是否变化。</li>
<li>由于监听$scope.name的$watch报告了变化，他会强制再执行一次$digest循环。</li>
<li>新的$digest循环没有检测到变化。</li>
<li>更新与$digest.name 新值相应部分的DOM。</li>
</ul>
 
<h2>9、Angular生命周期</h2>
（1）ngOnChanges：当数据绑定输入属性的值发生变化时调用，初始化前也会被调用一次。
（2）ngOnInit：初始化
（3）ngDoCheck：自定义的方法，用于检测和处理值的改变
（4）ngAfterContentInit：在组件内容初始化之后调用
（5）ngAfterContentChecked：组件每次检查内容时更新
（6）ngAfterViewInit：组件相应的视图初始化之后调用
（7）ngAfterViewChecked：组件每次检查视图时调用
（8）ngOnDestory：指令销毁前调用。
 
<h2>10、ng-if与ng-show的区别</h2>
（1）ng-if在表达式为true的时候才会创建这个dom节点，ng-show是初始时就创建了，只用用display来控制显示与隐藏。
（2）ng-if会（隐式地）产生新作用域，ng-switch、ng-include等会动态创建一块界面的也是如此。
这样会导致在ng-if中用基本变量绑定ng-model，在外层div中把此model绑定给另一个显示区域，内层改变时，外层不会同步改变，因为此时已经是两个变量了。
       <img src="https://img2018.cnblogs.com/blog/1313634/201909/1313634-20190911155335069-621338363.png">
　　ng-show不存在这个问题，因为它不自带一级作用域。
　　避免这一问题出现的方法是：始终将页面中的元素绑定到对象的属性（data.x）上，而不是直接绑定到基本变量（x）上。
  
来源：https://www.cnblogs.com/xiaoan0705/p/11137178.html

頁: [1]

琼殿技术论坛's Archiver

Angular