更新 : 2019-01-03

原来 @ContentChild 是可以找到 sibling 指令或组件的

不小心看到 routerLinkActive 的源码,发现它是使用 @Contentchild 来获取 routerlink 的 

本来觉得有点怪,contentchild 不是只能获取到 transclude 的指令吗, 可是 <a routerlink routerlinkactive > 也可以 sibling 用啊. 

做了测试才知道原来一直都是可以的.

 

多个 ng-content 时要留意

refer : https://www.youtube.com/watch?v=PTwKhxLZ3jI

<ng-content></ng-content>
after
<ng-content></ng-content>

当模板中有超过一个 ng-content 时, 只有最后一个会显示出来. 就是 after 之后的那个.

<ng-content *ngIf="true" ></ng-content>
after
<ng-content *ngIf="false" ></ng-content>

这样的话, 你可能以为第一个会展现,但其实是不会,因为 ng-content 是最后一个,而最后一个 ngif 确实 false 所以就什么也没展现了.

试试用 ng-template + ng-container 来 append

<ng-template #template><ng-content></ng-content>
</ng-template><ng-container #target ></ng-container>
<div (click)="append()" >append</div>

结果第一个是有 content 的,接下来就没有了.  ngFor 也是如此 

如果我们可以接受只有其中一个 ngIf 获取到 content 那么,写法可以是这样的. 

这个其实也是上面 template + container 的概念做的. 

<ng-template #content><ng-content></ng-content></ng-template>
<ng-container *ngIf="true" ><ng-template [ngTemplateOutlet]="content" ></ng-template>
</ng-container>
<ng-container *ngIf="true" ><ng-template [ngTemplateOutlet]="content" ></ng-template>
</ng-container>

 

 

 

更新 : 2018-12-22 

viewchild viewchildren contentchild 使用细节

补上一些之前没有写清楚的细节

XXChild vs XXChildren 

child 返回第一个被 select 中的值, 

children 返回一个 queryList 对象

child 的好处是简单, 适合用于只有一个值而且这个是固定存在的情况下

children 除了可以获取到多个值以为,另一个特色是它可以 watch, 当数量变化时可以监听到. 

contentXX vs viewXX

区别是查找的区域不同 

比如你在 test.component 里写了这 2 个 query 

view 的查找区域是 test.component.html 

ng-content, ng-template内, 内组件的模板都不在其查找范围内哦

<ng-content></ng-content>
<ng-template><abc></abc>
</ng-template>
<abc></abc>

上面只有最后一行是在范围内的, 而 abc.html 里头的 component 也不在范围内了. (所以没有层中层找的概念)

content 的查找区域来至于 trancslude 

同样的 ng-template, ng-content. 组件内的模板也都不算在范围哦

<test><ng-template><abc></abc></ng-template><ng-content></ng-content><abc></abc><div><abc></abc></div>
</test>    

这里有个值得注意的点

@ContentChild(Abc, { descendants: true })

descendants 子孙, 默认是 false. 意思是只搜索第一层的 element, 最后那个被 div 包起来的 abc 组件是搜索不到的

如果设置是true, 那么 div 内的 abc 才可以获取到. 它的区别只是这个而已哦.

另外还要讲讲 read 

XXChild(firstParam).

firstParam 可以是任何依赖注入. 比如一个 class, 一个 token. 虽然说是模板查找但是其实是依赖注入查找来的.

比如 : 

ViewChild(Xyz) 

假设 abc.compomnent 的 decorator 声明了 providers : [{ provide Xyz, useClass: WhatEverClass }]  

那么 ViewChild 是会找到这个 WhatEverClass 的

除了 class token, 还可以是模板变量 

这里就会需要用到 read 了 

比如 test.html

<abc #abc ></abc>
<div #div ></div>
<div someDir #dir1 ></div>
<div someDir #dir2="someDir" ></div>

viewchild('abc') 获取到 abc component

viewchild('div') 获取到 elementRef 注意这里是 ref 而不是直接拿到 element

viewchild('dir1') 获取到 elementRef 模板变量遇到 component 就会拿 component, 遇到指令不会有设么特别反应,所以依然获取的是 elementRef

viewchild('dir2') 获取到 someDir 因为我们写了一个 =exportAsDir 

所以最关键的地方是第 1 个, 当模板变量没有指定获取指令时,如果 element 是 component, ng 会认为我们要的是 component 而不是原生 html element 

这个合理, 因为其实 component 当然也是 html element 丫,在 custom element 的情况下也是. 当然对于后端渲染就不一样啦

所以呢,如果我们想要的是原生 element 而不是 component 我们就必须做一些额外的处理.

viewchild('abc', { read : ElementRef }) 

这样就可以了, 随带一提, 这个默认选 component 的设计, 在我们只使用模板变量时尤其糟糕, 因为我们无法告诉 ng 选择原生 html element 唯一的方法就是通过 viewchild 或者使用另个一指令来曝露. 比如写一个 native 指令来干这个事儿...

<abc native #native="native" ></abc>
<div (click)="log(native.element)" >click</div>

最后如果是第 4 个场景 

<div someDir #dir2="someDir" ></div>

viewchild('dir2') 会获取到 someDir 但是如果我们硬加上 read, 最后 read 会优胜. 

viewchild('dir2', { read : ElementRef }) 最后依然是 elementRef

 

 

 

更新 : 2018-12-19 

模板语法 'as' 的原理

<div *ngIf="condition as value; else elseBlock">{{value}}</div>

以前我以为 'as' 应该被视为 NgIfAs 指令, 但是在源码里却没找到

问了大神 Trotyl 后才知道 

as 是 let 的严格语法糖,`foo as bar` 就是 `let bar = foo`,不过两者省略内容时的自动补全不同,`as bar` 会被补全为 `<directiveName> as bar` 而 `let bar` 会被补全为 `let bar = $implicit`。。一个很常见的用户误解是认为 as 和前面的表达式有关系,*ngIf="condition as value" 会被直接断句为 *ngIf="condition; as value" 而后补全为 *ngIf="condition; ngIf as value",换成 let 语法就是 *ngIf="condition; let value = ngIf"。。

 

 

更新 : 2018-04-02

component 也可以当指令用

<div app-super >kknd</div>
<div><app-super>kknd</app-super>
</div>

上面几乎是等价的, 虽然 component 通常都是 element, 但其实也是可以写成 attribute 的, 不过一个 element 只能绑定 1 个.

@Component({selector: '[app-super]',templateUrl: './super.component.html',styleUrls: ['./super.component.scss'],changeDetection: ChangeDetectionStrategy.OnPush
})

 

 

更新 : 2018-04-01 

结构指令 + 微语法 + template 

refer : https://angular.cn/guide/structural-directives#microsyntax (微语法规范)

<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

其实之前也说过了,只是说的不详细, 多举些例子熟悉一下. 

像上面这种写法,非常适合做动态插入模板. 

原理是用一个结构指令把 template 存起来,稍后才输出 

<app-super *dada="let contextName = name; let $implicitValue; columns: 100">{{ $implicitValue }} <br> {{ contextName }}
</app-super><ng-template dada [dadaColumns]="100" let-$implicitValue let-contextName="name"><app-super>{{ $implicitValue }} <br> {{ contextName }}</app-super>
</ng-template>

上面 2 个写法是完全一样的意思, 第一个在 ng 编辑之后会变成第 2 个. (第一个只是美一点罢了)

我们通常会使用第一种写法. 

需要注意几个事儿. 

* 表示是 ngtemplate 把 super 包起来, 

dada 是结构指令 

let $implicitValue 可以写成任何的变量, let whatever, 最终它的值是 ngTemplateContext.$implicit 

columns 编辑后会变成 [dadaColumns] 就是把 *dada <--这个指令名加上去 prefix. dadaColumns 可以是 input or 另一个指令都可以, 

这里有一个点要留意, 就是第一个字大小写, 按理说 dadaColumns input 应该时对应 Columns 第一个字大写,但是 ng 会无视掉, 大小写都可以. 但是呢, ide 会报错. 

虽然报错,但是运行时正确的. 

let contextName = name 这个对应 变量 = ngTemplateContext.name 

在要使用它的地方调用就可以了. 从 dada 里面拿出 template 输入 context 

<ng-container *ngTemplateOutlet="dada.template; context: { name : 'xinyao', $implicit : 'value' }"></ng-container>

p,s 微语法的顺序要注意, 

*dada="columns: 100;let contextName = name; let $implicitValue;" <-- 这样是不可以的,开头一定要 let ...

*dada="let contextName = name; let $implicitValue; columns: 100" <-- OK
*dada="let $implicitValue; let contextName = name; columns: 100" <-- OK

dada 指令 

import { Directive, TemplateRef, Input } from '@angular/core';export class Person {name: string$implicit = 'value'
}@Directive({selector: '[dada]',exportAs : 'dada'
})
export class DadaDirective {constructor(// 通过注入获取到当前模板, 因为指令会放在模板上面,所以可以注入到// public template: TemplateRef<Person> ) { }@Input('dadaColumns') // ng 的规范是 
  columns: number }
View Code

 

 

更新 : 2018-03-11

[attr.href]="null"  null 可以把 attribute href 给移除.

 

更新 : 2018-03-09

补充 : 

constructor 阶段
app.html
view scan 顺序是 上到下,外到里 (dir 的顺序不是预计你放哪个在前面,而是 declarations 的顺序)
<1 3 2 >
   <4></4>
</1>
<5></5>
依照顺序每个 component and directive constructor 运行.
这一个 view 搞定后, 进入 1 comp 的 view 重复上面的 view scan,一直重复往里面进, 直到没有 component or directive 了就退回上一个 view
比如退回到这 view, 再进入 4 的 view... 然后 5 的 view..
搞定后这个阶段就结束了。全世界的 comp and dir 都 constructor 了.

onInit, onContentInit, ContentChecked, render 阶段
依照上面的顺序,逐个 oninit, 这时 @input 就有了. 但要小心,因为 1 comp onInit 比 2 dir 早
如果 1 comp 依赖 2 dir 的值就要小心哦,
你可以依赖 2 dir constructor 后的值,但不可以依赖 2 dir onInit 的值 (因为它都还没有 onInit)
这一个 view 搞定 onInit 后, 先不要进入 1 comp 的 view。
而是继续在这个 view 跑 onContentInit 和 ContentChecked
顺序是这样的 里到外,上到下 (dir 后于 comp 哦)
<2 4 3>
   {{ render1 }}
   <1>{{ render2 }}</1>
</2>
<5></5>
onContentInit和ContentChecked 是一起跑的,而不是跑完全部人的 onContentInit 才跑 ContentChecked. 是紧接着一起,不是分开哦.
这一个 view 完成后, 就跑这一页的 render,这时 render1,2 的 getter 就会触发了.
到这里 app view 渲染算是完成了,现在要处理它的孩子们.
我们从 2 comp 的 view 开始运行 onInit 阶段. 然后递归进去..
这里有个关键就是,什么时候一个 comp 的 viewInit 会被触发.
答案是 这个 comp 的 parent view 处理完所有 comp init 阶段后.
比如 2 comp 的 viewinit 什么时候触发.
2 comp view 即使 render 了它也不会触发.
而是等到 2 comp 的 parent 也就是 app view 处理完所有 comp (2,4,3,1,5 comps) 之后, 才会逐个调用 2,4,3,1,5 的 viewInit and viewchecked.
这 2 也是紧接着一起触发的。

ng 的顺序 

start from html
scan 上到下,外到里 把所有组件和指令都实例化 constructor
note : constructor 阶段拿不到 input 值
顺序是这样
app.component.html
<1>
<2>{{ renderValue1 }}</2>
</1>
{{ renderValue2 }}
<3></3>
完了之后按顺序进入组件的模板, 然后重复上面的实例化一直 loop 到最里面里面完.
全部实例化完后,回到最初的模板.
开始一个个组件 OnInit, 顺序一模一样
init 的时候就可以拿到 input 值了,如果有 viewchild 也都拿到了
因为所有组件都实例化了嘛, 不过特别注意,虽然你拿到 viewchild 组件,但是这些组件都还没有 OnInit 哦.
这也是为什么会有 afterViewInit 的意思了。懂了吧.
这一模板 OnInit 完了之后
开始一个个组件 run AfterContentInit and AfterContentCheck, 上到下, 里到外
为什么是这个时候 run 呢?
因为我们上一个步骤才把这一页所有的组件 OnInit 啊.
比如 <2></2> 就是一个 transclude 的, 我们刚把它 Oninit 好,现在就要通知 <1></1>
调用它的 afterContentInit and checked 了
特别注意, 虽然这里调用了checked, 但其实目前这个模板是还没有 reader 的
比如 renderValue 是一个 getter, 这个时候, 是还没有被调用过的.
等到这一模板所有的 afterContentInit and checked 后, 这个模板就开始 render 了
renderValue getter 被触发.
这一模板算是搞定一大半了, 现在我们就开始进入 <1> 的模板
在 <1> 的模板里,要做的事情依旧是一个个组件 OnInit -> afterContent -> render
和刚才一样. 假设这个 <1> 模板 reder 完了之后发现, 发现已经没有子层组件可以继续深入了。
那么它就会调用 <1> 的 AfterViewInit.
然后退出这个模板回到上一个.
所以这个进入返回的循环就成立了。
当我们深入完 <3></3> 并且返回了之后,最初的模板就没有组件可以在深入了。这时我们就调用
AfterViewInit 假设我们最初这个模板就是 AppComponnt, 那么 AppCompoennt.AfterViewInit 后
整个循环也就结束了.

 

实例化所有的 component and 指令 (所有包括子孙的 view 里面的)

init 这个模板的所有 component (外面到里面)

template 如果在这个模板上会被渲染的话, 会先去 render template 的内容, 比如 *ngIf='true', templateoutlet 

contentInit 这个模板的所有 component (里面到外面)

render 这个模板 (binding data)

递归的进入子孙层, 循环上面的顺序 

循环完了以后, viewInit 这个模板的 component (里面到外面), 概念 : component 的 viewInit 是依据使用它的组建的模板决定执行时间的,不是说这个 component render 了以后就马上执行 viewInit. 注意哦

 

更新 : 2018-02-08 

ng 的顺序 

一个组件的顺序很好理解 construtor -> init -> content -> view 

但层中层有时候就容易昏头了 

这里记入一下, 

1. 所有的 construtor 一定是先执行的 (一直到子孙层, 全部执行, 除了在 ng-template 的不会马上运行)

2. 把模板中所有的 component onInit 一遍, 上到下,外到里 

3. 然后在模板中寻找拥有 transclude 的 component, 并运行 afterContent 里到外 

4.只要模板中存有其它 component, 就必须等到这些 component 都 after view 了, 自己才能 after view. 

4. 模板中的 component 要 afterviewinit 必须等到整个模板的子孙层都遍历 2-4 一遍, 子孙全部好了,
在依据上到下,里到外去把模板中每一个 component 运行 afterviewinit 另外说一点,  ng-template + transclude content + ngtemplateoutlet 其实就是把模板内的组件移入子层,它会在 aftercontent 之后才运行 construtor, 然后其它的顺序就连上普通的了. 

我之前一直以为 template 会在 after view 之后才跑,其实不会, 它和一般 component 是一样的执行只是 construtor 有点奇葩而已.  

看例子 : youtube link :  https://www.youtube.com/watch?v=rQEfUG3GN40&feature=youtu.be (给我自己看的)

 

 

更新 : 2018-02-01

viewchild 的循环引用 

有时候我们会遇到循环引用比如 parent 使用了 viewchild 同时 child 又 inject 了 parent component 

这时我们可以使用 

@ViewChildren(forwardRef(() => SZoomComponent))
或者是  construtor @Inject(forwardRef(() => SZoomComponent))
2者运用场景不同,这里不细说了。 

更新 : 2017-10-18 

当 local variable 遇到 ngIf 

<div (click)="input.focus()" >click</div>
<input *ngIf="true" #input type="text">

上面 focus 会报错, 因为 ngIf 会打乱顺序. 

解决方法就是使用 viewchild 

  @ViewChild('input', { read : ElementRef })input : ElementRef
<div (click)="input.nativeElement.focus()" >click</div>
<input *ngIf="true" #input type="text">

注意这时 input 变成了 ElementRef 类型了 

 

select option 用 [value] 和 [ngValue] 的区别 

基本上用 [ngValue] 就对了, [value] 只能是 String.

如果用 mat-option 那是没有 [ngValue] 的, 但是它的 [value] 其实就是 [ngValue] 的功能

 

更新 : 2017-10-14 

ViewChildren + 派生类 

<form [formGroup]="form"[fGroup]="edm"(ngSubmit)="submit()"><s-mat-input controlName="name"></s-mat-input><s-mat-upload controlName="images"></s-mat-upload><button type="submit">submit</button>
</form>

比如我们想把所有的 control select 出来 

app.component.ts

  @ViewChildren(AbstractAccessorComponent, { read: AbstractAccessorComponent })accessors: QueryList<AbstractAccessorComponent>

mat-input.ts 通过依赖注入就可以了 

@Component({selector: 's-mat-input',templateUrl: './input.component.html',styleUrls: ['./input.component.scss'],providers: [{provide: AbstractAccessorComponent,useExisting: forwardRef(() => InputComponent)}]
})
export class InputComponent extends AbstractAccessorComponent implements OnInit {required = false;ngOnInit() {super.ngOnInit();this.required = this.fControl.validators.find(v => v.name == 'required') != null;this.inputType = this.fControl.ui.accessorType.substring('input'.length).toLowerCase();}
}

 

 

 

更新 : 2017-09-05 

<app-abc [comp]="ttc" ></app-abc>
<app-efg #ttc ></app-efg>

组件可以这样沟通, 但执行顺序我们要搞清楚哦. 

依据 element 的结构, app-abc 会先被 onInit, 这时我们可以获取到 efgComponent 实例, 但是这个 efg 实例只是个对象有一些原始值, 但还没有被 onInit 过. 所以如果我们想依据它来做渲染, 那么要 settimeout 哦。 

 

 

 

更新 2017-08-30 

监听 transclude components 变化

test-dada.component.html

<test-dada><dada-child *ngFor="let item of items"></dada-child>
</test-dada>

dada-child.component.ts 

export class DadaComponent implements OnInit, AfterContentInit {@ContentChildren(DadaChildComponent, { read : DadaChildComponent }) dadaChildComponents: QueryList<DadaChildComponent>ngAfterContentInit() {this.dadaChildComponents.changes.subscribe((c) => {console.log('changed', c);
   console.log(c === this.dadaChildComponents); // 是一样的});} }

test-dada.component.ts 

changItem() {this.items.push({ Id : 4, value : 'd' }); // okthis.items = []; // okthis.items[0].Id = 5; // ok or fail (依据有没有使用 trackby)this.items[0].value = 'dada'; // fail
}

不管有没有使用 onPush, 不管有没有 immutable, ng 都可以监听到 array 的增加和减少. 需要注意的是 ng 是i通过 trackby 来做对比的, 然后判断 array 的存在与否. 

 

 

要在 component 内绑定全局事件的话,可以使用 @HostListener, 它会随着 component destroy 而 unbind, 很方便的哦.

export class StoogesAppComponent implements OnInit {@HostListener('document:click', ['$event'])private documentClick(event: Event) {this.globalClicked$.emit(null);}
@HostListener('window:resize', ['$event'])
onResize(event) {
console.log(event.target.innerWidth);
}
}

 

 

更新 2017-08-29 

ng-template 使用 

之前讲过, 不过例子不整齐, 这里重写一个 

<app-dada><ng-template #resultTemplate let-insideValue="insideValue">{{ insideValue }}</ng-template><ng-template #optionTemplate let-i="index" let-item="$implicit">{{ i }} : {{ item }}</ng-template>
</app-dada>

我们想把 2 个模板传进 dada 组件里, 其中一个还是用于 ngFor 哦 (注意, $implicit 用来获取 ngFor 的 item)

此外我们还通过 let-insideValue 来和 dada 组件沟通, 这个 insideValue 是由 dada 组件负责填入的. 

export class DadaComponent implements OnInit {constructor() { }
@ContentChild('resultTemplate', { read: TemplateRef }) resultTemplateRef: TemplateRef<{ insideValue: string }>
  @ContentChild('optionTemplate', { read: TemplateRef }) optionTemplateRef: TemplateRef<NgForOfContext<string>>items = ['a', 'b', 'c'];ngOnInit() {}}

达达组件定义好 2 个 templateRef, 我们也可以使用 @Input 传入 templateRef, 但这里我们用的是 translude 的手法. 

dada.component.html

<ng-container *ngTemplateOutlet="resultTemplateRef; context: { insideValue : 'insideValueDone' }"></ng-container> 
<ng-template ngFor [ngForOf]="items" [ngForTemplate]="optionTemplateRef"></ng-template>

这样就可以了.

 

更新 

<img [sImage]="[image, scene]" >
如果 input/directive 的表达式是 array [], 那么 ng 会判断里面的每一个值, 如果有一个不同就会触发 onChange 如果没有则不会. 

更新 2017-06-30

组件是可以继承来用的. 很多时候 template, css 是一直变化的,但是 controller 逻辑却经常一样,所以就可以使用继承来解决了.

@Component({selector: 'app-test',templateUrl: './test.component.html',styles: [],changeDetection: ChangeDetectionStrategy.OnPush,// 如果父组件是 accessor 记得这里要写 provider 哦 
  providers: [{provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => TestComponent),multi: true}], 
})
export class TestComponent extends PaginationComponent implements OnInit {constructor(cdr: ChangeDetectorRef,validators: ValidatorsService) {super(cdr, validators); // 父组件需要什么就注入什么}ngOnInit() {super.ngOnInit(); // 记得调用父组件哦 // do something else ... 
  }
}

使用 extends 就可以了, selector, css, template 都必须 override 

ngOnInit, OnDestroy 这些,如果子组件没有 override, 父组件依然会自动跑,如果你 override 了请自己决定要不要调用.

 

 

更新 2017-03-15

image src biding 404 注意事项

<img [src]="data" >

data = "" 就不会去加载图片( undefined, null 也是去加载哦 ), 其余情况下,模板一旦渲染就会马上去加载. 

好的处理就是写个 ngIf 等待 async data 回来才渲染图片. 

 

 

更新 2017-03-03: 

ng 上写 keyCode 事件

<input (keydown.arrowUp)="$event.preventDefault()"(keydown.shift.tab)="$event.preventDefault()"                            type="text"  />

看的出就是把 keyCode.key 写成驼峰式就可以监听到了. 配合 shift 也很容易写哦.

 

QueryList & transclude Content

@ContentChildren(OptionComponent) options: QueryList<OptionComponent>

在处理 ContentChildren 时要注意几件事. 如果我们想监听它的 length 改变, 可以使用 change.subscribe(...) 

如果你想监听 content 内 component 的事件,你要记得 rewatch,像我上面那样,因为 content 的数量是动态的,compoennt 会被创建和销毁, 一旦销毁了, 你的监听也被销毁,而新创建的你得再监听一次. 

如果你想在数量变化之后对 content 进行操作,你得写一个 timeout, 让它触发下一次的 digest 

 

最近自己在写 multiple select 有些发现 

ng 的 select option 的 2 个小逻辑 : 

<select [(ngModel)]="hero.skillId" name ="skillId"><option *ngFor ="let skill of skills" [ngValue]="skill.id">{{ skill.name}}</ option>
</select>

1.如果你修改 skills 的话, this.skills[0].value = "bla bla" 或 this.skills = new array ..

  ng 通过 doCheck 检测到你的修改, 然后做出更新. 如果当前的 model value 无法在新的 options 中匹配到的话, ng 不会做任何处理. 

2.即使你写 trackBy, 当你把 skill.value 换掉后, ng 无法通过 trackBy 找到对的 value 来更新. e.g your select is { Id :1,value :"v" }, then you change skills to [{ Id:1,value:"ttc" }] after detectchange    your model still "v".

3.由于是直接 muta skills, ng 只能通过 doCheck 来检查, 在 ChangeDetectionStrategy.OnPush 的情况下, ng 会直接坏掉哦. 解决方法就是手动触发 changeDetect. 参考 OnPush : http://www.cnblogs.com/keatkeat/p/5963295.html

 

 

更新 : 2017-02-11 

angular drag & drop 如果不要使用 plugin 的话, 可以用最基本的写法

可以参考原生 html 的例子 : http://www.w3schools.com/html/html5_draganddrop.asp

<form [formGroup]="form" submitableForm> <s-upload #imagesUpload [config]="uploadConfig" formControlName="images"></s-upload> <div *ngFor="let fileData of imagesUpload.fileDatas" draggable="true" (dragstart)="imagesUpload.dragingFileData = fileData"(dragend)="imagesUpload.dragingFileData = null" (dragenter)="imagesUpload.dragingFileData && imagesUpload.moveFileData(fileData,imagesUpload.dragingFileData)" [sDragover]="imagesUpload.dragingFileData"  class="uploadImage"><img [src]="fileData.file" width="100px"><i [show]="fileData.loading" class="fa fa-spin fa-spinner loading"></i><i (click)="imagesUpload.removeFileData(fileData)" [show]="!fileData.loading" class="fa fa-times close"></i></div>
</form>

dragingFileData 用于缓存变量

(dragend) 清楚缓存, 缓存还有一个重要用途就是如果你有 2 个 upload file 的时候不允许它们 cross drag

之所以不直接使用 (dragover) 是因为它会一次触发 digest (性能优化), sDragover 是一个指令里面手动添加了 event, 这样就不会一直 digest 了. 

 

 

更新 : 2017-01-26 

component selector 不需要担心和未来游览器撞名字, ng 最终会胜利. 

directive 和 component input 不需要担心冲突, 2 个可以一起工作, 都拿得到值.

 

 

2016-08-28

refer : 

https://angular.cn/docs/ts/latest/guide/template-syntax.html

https://angular.cn/docs/ts/latest/cookbook/component-communication.html

https://angular.cn/docs/ts/latest/guide/displaying-data.html

https://angular.cn/docs/ts/latest/guide/user-input.html

https://angular.cn/docs/ts/latest/guide/lifecycle-hooks.html

 

ng 的组件和游览器原生的组件是同一个概念,在方方面面都很相似. 

 

和 ng1 一样,组件少不了数据绑定 

1. model to view 绑定 

template: `<my-product [model-to-view-value]="'Derrick' + 'Yam'" ></my-product>
`@Input("model-to-view-value") //如果属性名字不一样的话可以调整
modelToViewValue: string;

 有几个点容易让人混淆

1. 左边不使用 [括弧] : <my-product value="abc" > 这样的写法右边的值 "abc" 只是一个很普通的 string, 它并不是引用我们 component instance 的属性哦. 也因为如此, 你之后就不可能改变它的值了. 算是 one time binding and only for string. (html 就是这样).

2.你可能会问如果这样呢 : <my-product value="{{ abc }}" > 这样的话右边的 "abc" 会引用 component instance, 而且会一直保持同步, 也就是说不是 one time binding 了. 但值依然只能是 string. abc must be string.

3. 左边是 [括弧] : <my-product [value]="abc"> 这样的话 abc 就可以传入任何类型了, 也会一直保持同步. 这也是我们最常用的表达模式. 

 

2. 事件绑定 (监听嘛) 

和 html 一样,我们内部只返回一个值, 外部通过关键字 $event 来获取 

selector: "my-app",
template: `<my-product (myClick)="doSomething($event)" ></my-product>
`
doSomething(data: string) { console.log(data) }selector: "my-product",
template: `<div>this is product component</div><div (click)="publish($event)" >publish</div>
`
@Output()
myClick: EventEmitter<string> = new EventEmitter();
publish($event) {
   //$event = html original click event
this.myClick.emit("value"); }

很可惜 ng 的事件不支持冒泡 很可惜 ng 的自定义事件不支持冒泡, 这里和 dom event 不同,不好记 /.\ 

 

3.双向绑定 

selector: "my-app",
template: `      <p> value outside :  {{ someValue }}</p><div (click)="updateValue()" >update value from outside</div><my-product [(someValue)]="someValue" ></my-product>
`
someValue: string = "value start";
updateValue() {this.someValue = "value updated from outside";
}

selector:
"my-product", template: ` <div> value inside : {{ someValue }}</div><div (click)="updateValue()" >update value from inside</div> ` @Input() someValue: string; @Output() someValueChange: EventEmitter<string> = new EventEmitter(); updateValue() {this.someValueChange.emit("value updated from inside"); }

其实ng是通过数据绑定加上事件绑定来完成这事儿的, [(value)] 只是语法糖

把它拆开是这样的 

<my-product [someValue]="someValue" (someValueChange)="someValue = $event" ></my-product>

如果要绑定原生 html 比如 input, select 等就是用 ng 帮我们做好的 [(ngModel)] 就可以了, 之后我会和表单一起讲.

 

当我们绑定到原生游览器组件时有些概念要清楚.

dom Attribute 和 dom Property 不是同一个东西

<img src="123.jpg" /> 写在 element 上的是 Attribute, 它的值只用来初始化 property 的值 

imgDomObject.src = "456.jpg" 这个才是 property.

ng 的绑定是在 property 上的. 

Attribute 和 Property 不总是一对一匹配的, 有些 Attribute 是没有 property 的,这时我们要这样写 

<some-elem [attr.attributeName]="..." > 要在前面加 attr. 

 

没有 ng1 的 ng-options 了,现在是这样 : 

ng-repeat = *ngFor (*表示结构类型的指令)

<select [(ngModel)]="hero.skillId" name ="skillId"><option *ngFor ="let skill of skills" [ngValue]="skill.id">{{ skill.name}}</ option>
</select>

 

模板中如果有引用对象属性,但是对象是 null 时, 会报错哦. 可以使用 ?. 来处理,这个和 c# 6.0 语法一样

<div>{{ someObj?.value }}</div> 

 

*ngFor 的值使用的是"微语法"解析, 它和我们平时写模板表达式是不同的哦.

*ngIf 用的也是 "微语法". 

track by 的值是一个方法 (一定要是一个方法)

track by 的作用 : 

ng 很聪明, 如果 heroes 是值类型的话, 它不会随便的 rebuild element, 比如 : heroes = ["a","b"], 然后 heroes = ["b","a"] 这样 ng 是不会 rebuild 的, 它只会更新 element.

但是如果是引用类型, heroes = [{ Id : 1 },{ Id : 2 }] 然后 [{Id : 2},{Id :1}] , ng 就会 rebuild element 了

为了要性能好一些, 我们尽力不要 rebuild, 可以用 trackby, trackby return 的值决定了需不需要 rebuild.

trackby index 和 Id 的区别 : 

[{Id : 1}, {Id :2}] change to [{Id: 2}]

trackby index 的话 destroy 的是 Id 2  (因为 ng 是把 slot 1 的 Id update 去了 2, 然后 destroy 掉 2)

trackby Id 的话 destroy 的是 Id 1 

依据你的需求来决定怎样 trackby 哦.

 

template: ` <div *ngFor="let hero of heroes; let i=index; trackBy:trackByHeroes" ><p>{{ hero.Id }}  {{ hero.name }}</p></div>
`
trackByHeroes(index: number, hero: Hero) {        return hero.Id;
}

所有的 * 结构指令都只是语法糖, 下面这个才是真正的写法

<ng-template ngFor let-number [ngForOf]="[1,2,3]" let-i="index" [ngForTemplate]="templateRef" [ngForTrackBy]="trackByFn" ></ng-template>

所以这 3 个是一样的: 

1.
<abc><div *="let insideValue = insideValue;" >{{ outsideValue }} vs {{ insideValue }}          </div>
</abc>2.
<abc><div template="let insideValue = insideValue;" >{{ outsideValue }} vs {{ insideValue }}          </div>
</abc>3.
<abc><ng-template let-insideValue="insideValue" ><div>{{ outsideValue }} vs {{ insideValue }}          </div></ng-template>  
</abc>


补上一个对应的

@Component({

  selector: 'abc',
  template : `
    <ng-template [ngTemplateOutlet]="templateRef" [ngOutletContext]="{ insideValue : insideValue }" ></ng-template>
  `
})

注意, 第 3 个的 let-inside 有一个 "-"

我推荐大家使用第 3 个, 虽然长一点,不过好理解,也不容易遇到坑 

比如 : 

<abc><ng-template #firstContent let-insideValue="insideValue" ><div>{{ outsideValue }} vs {{ insideValue }}          </div></ng-template>  
</abc>
@ContentChild("firstContent") templateRef; // 是对的<abc><div #firstContent *="let insideValue = insideValue" >{{ outsideValue }} vs {{ insideValue }}          </div>
</abc>
@ContentChild("firstContent") templateRef; // 是错的, 因为拿到的是 div 而不是 template 了.

 

ngForTemplate 允许我们绑定 templateRef, 比如 transclude 的 viewContent 等等. 

<div *ngFor="let number of [1,2,9]" >        <template [ngTemplateOutlet]="templateRef" [ngOutletContext]="{ data : number }" ></template>
</div>

ngTemplateOutlet 和 ngOutletContext ( ng还在试验中 ) 同样允许我们绑定 templateRef 而且可以注入 context 让 templateRef 通过 let-abc="data" 来调用到 number.

refer : http://stackoverflow.com/questions/37676593/how-to-repeat-a-piece-of-html-multiple-times-without-ngfor-and-without-anoher-c 

 

 

模板引用变量 ( template reference variables )

template: ` <input type="text" #input >{{ someValue }}<div (click)="someValue = input.value" >click</div>
`

#input 表示那个组件( 自定义组件也可以哦 ), 可用范围很广, 父亲,兄弟, 孩子都用的到 

它还可以配合自定义指令的 exportAs 来使用, 类似 #variable="exporstAs"; 当一个 element 上有很多指令时, 我们就可以选择要使用那个 class  

我们可以很容易的把一个外部的模板传进去组件中,并且沟通. (下面还会介绍一个 transclude)

//outer component<template #abc let-innerValue="data" ><div>{{ outerValue }}</div><div>{{ innerValue }}</div>
</template>
<inner [template]="abc" ></inner>//inner component <p>inner</p>
<template [ngTemplateOutlet]="template" [ngOutletContext]="{ data : 'innervValue' }" ></template>

 此外还能用它来获取 element 的 style 比如 height, width, scrollTop 等等  <div #div (click)="doSomething(div.scrollTop)">

  

管道 Pipe

import { Pipe, PipeTransform  } from "@angular/core";
//pure 的意思是 angular1 的 $stateful
@Pipe({ name: "demoCombine", pure : true })
export class DemoCombinePipe implements PipeTransform {  transform(value: string, param: string): string {return value + " " + param;}
}
template: `<div>{{ name | demoCombine : value }}</div>
`,
pipes: [DemoCombinePipe]

 

transclude 和 ng1 类似

template: `<demo-transclude-dir><div class="first" >first space</div><div class="second" >second space</div></demo-transclude-dir>
`,

可以选择任何方式来表示不同分区,我这里使用的是 class 

template: `<div>       <ng-content select=".first" ></ng-content> <ng-content select=".second"></ng-content></div>
`

内部通过 <ng-content> 配合 dom selector 来匹配区块 

transclude 通常会用到一个叫 viewProviders 的东西, 作用是隔离依赖注入, 比如我们不希望外部嵌套进来的 content 能依赖注入内部的 providers 就可以定义载 viewProviders. 

viewProviders 只有自己和 child 可以注入到, content 则注入不到.

 

这里懒得写了 

说说一些概念就好 

https://angular.cn/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview (生命周期钩子)

主要是说 

ngAfterContentInit, ngAfterContentChecked 

ngAfterViewInit, ngAfterViewChecked 的使用 

Content 拦截指的是 transclude 的内容, 在子层做拦截可以获取 transclude 组件对象然后动一点手脚. 

afterView 则指的是子层完成后,在父层做拦截, 这里可以调用到子层组件对象做一点手脚, 不过记得要跑一个 timeout 不然不会渲染 (因为这个阶段渲染已经结束了)

下面是之前写的一些代码 :

demo-interception.component.ts 

import { Component } from "@angular/core";import { DemoInterceptionParentComponent } from "./demo-interception-parent.component";
import { DemoInterceptionContentComponent } from "./demo-interception-content.component";@Component({selector: "demo-interception", //注意 demo-interception-content 需要定义一个模板引用和一个class //还有 demo-interception-content 的 [value] 也可以让 parent 去拦截做 binding, 不一定要在这里做 binding, 因为重要是 create content component 时要有就可以了.
    template: `<div><demo-interception-parent [value]="'parent value'" >                <demo-interception-content #firstContentRef class="firstContent" [value]="'content value1'" ></demo-interception-content>  </demo-interception-parent>           </div>
    `,   directives: [DemoInterceptionParentComponent,DemoInterceptionContentComponent]
})
export class DemoInterceptionComponent 
{   }
View Code

demo-interception-content.component.ts

import { Component, Input } from "@angular/core";import { FirstContentInterface } from "./demo-interception-parent.component";@Component({selector: "demo-interception-content",template: `<div>{{ value }}</div>
    `
})
export class DemoInterceptionContentComponent implements FirstContentInterface {@Input() value: string;}
View Code

demo-interception-parent.component.ts

import {Component,OnInit, OnDestroy, OnChanges, DoCheck, AfterContentChecked, AfterContentInit, ContentChild, ViewChild, AfterViewInit, AfterViewChecked, Input, SimpleChange
} from "@angular/core";import { DemoInterceptinChildComponent } from "./demo-interception-child.component"; export interface FirstContentInterface
{value: string;
}
@Component({selector: "demo-interception-parent",      template: `<div>   <ng-content select=".firstContent"></ng-content><demo-interception-child [value]="'child value'" ></demo-interception-child></div>
    `,directives: [DemoInterceptinChildComponent]
})
export class DemoInterceptionParentComponent implements OnInit, OnDestroy, OnChanges, DoCheck, AfterContentChecked, AfterContentInit, AfterViewInit, AfterViewChecked {@Input() value: string;ngOnInit() {console.log("init");}ngOnDestroy() {console.log("destroy");}//note : 好比以前的 dirty check, 动不动就会跑的, 当心性能哦
    ngDoCheck() {console.log("doCheck");}//note : 当input属性发生变化的时候除非, 使用简单的 === 如果是对象的话不会做深沉对比哦
    ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {console.log("onChange");//console.log(changes);for (let propName in changes) {let chng = changes[propName];let cur = JSON.stringify(chng.currentValue);let prev = JSON.stringify(chng.previousValue);//console.log(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
        }}//教程是使用 class 而非 Interface 的//e.g. : @ContentChild(ComponentClass) contentChild: ComponentClass;//但是呢,实际开发的时候, 内部组件不可能预测到外部将传进来什么组件//也不可能要求传进来的组件必须继承任何特定的类 //我们顶多能要求他实现我们的接口而已. //"firstContentRef" 这个是通过模板引用来实现的,也算规范, 教程有说可以用模板引用@ContentChild("firstContentRef") contentChild: FirstContentInterface; ngAfterContentChecked() {this.contentChild.value = "new content child value";console.log("afterContentChecked")}ngAfterContentInit() {console.log("afterContentInit")}//viewChild 拦截是在整个 view 做好之后才出发的//所以如果我们想在目前这个 parent component 中对其做调整的话//我们必须写一个 setTimeout 使它在 digest 一轮做更新
    @ViewChild(DemoInterceptinChildComponent) viewChild: DemoInterceptinChildComponent;ngAfterViewInit() {console.log('afterViewInit'); }private record = 0;ngAfterViewChecked() {console.log(this.viewChild.value);//当然需要 if else 啦, 不然不是死循环吗.. if (this.record == 0) {this.record = 1;setTimeout(() => {this.viewChild.value = "888";});}      console.log('afterViewChecked');   }
}
View Code

demo-interception-child.component.ts

import { Component, Input } from "@angular/core";@Component({selector: "demo-interception-child",template : `<div>{{ value }}</div>`
})
export class DemoInterceptinChildComponent
{@Input() value: string;}
View Code

 

组件通讯的几个方式

@Input()

@Output()

service

@Input setter or ngOnChanges  ( 针对引用的话, 修改内部是不会触发的哦, 一定要连引用都换掉才行, immuatable 概念)

local variable (refer : https://angular.cn/docs/ts/latest/guide/template-syntax.html)

ViewChild, ViewContent

依赖注入 parent component ( 如果parent是抽象或则有循环引用的话要 refer : https://angular.cn/docs/ts/latest/cookbook/dependency-injection.html )

 

as 是 let 的严格语法糖,`foo as bar` 就是 `let bar = foo`,不过两者省略内容时的自动补全不同,`as bar` 会被补全为 `<directiveName> as bar` 而 `let bar` 会被补全为 `let bar = $implicit`。。一个很常见的用户误解是认为 as 和前面的表达式有关系,*ngIf="condition as value" 会被直接断句为 *ngIf="condition; as value" 而后补全为 *ngIf="condition; ngIf as value",换成 let 语法就是 *ngIf="condition; let value = ngIf"。。

转载于:https://www.cnblogs.com/keatkeat/p/5816368.html

查看全文
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!

相关文章

  1. angularJs中基于模板递归的实现

    同样的原理&#xff0c;可以通过组合angularJs内置的ng-include、ng-init来达到递归的效果&#xff0c;示例模板如下&#xff1a;复制<script id"recursion" type"text/ng-template"><li ng-repeat"item in cate"><a href"{…...

    2024/3/13 18:58:37
  2. 那家拉双眼皮医院好吗

    ...

    2024/3/15 14:48:59
  3. 地球物理软件技术发展趋势与战略研究

    地球物理软件技术发展趋势与战略研究赵改善*中国石油化工股份有限公司石油物探技术研究院,南京210014摘要:地球物理技术及其应用软件的发展日新月异。地球物理软件技术发展表现出先进性、开放性、一体化、自由化、网络化、并行化、可视化、标准化、智能化、普及化等特征。地球…...

    2024/3/15 14:48:58
  4. 有哪家做双眼皮医院好啊

    ...

    2024/3/15 5:30:31
  5. 切开双眼皮需要涂祛疤的药不

    ...

    2024/3/15 14:48:57
  6. 哪个医生做双眼皮好呀

    ...

    2024/3/20 5:15:35
  7. 福州苏州圣爱医院做瑞安瑞丽做双眼皮修复宁波哪家医院好

    ...

    2024/3/15 14:48:54
  8. 双眼皮开的太窄

    ...

    2024/3/15 14:48:53
  9. 武警广西总队双眼皮手术后贴吧

    ...

    2024/3/15 14:48:52
  10. 割双眼皮心得体会

    ...

    2024/3/15 14:48:53
  11. 铭医整形开眼角加双眼皮价格

    ...

    2024/3/15 14:48:51
  12. 媚眼术和普通精雕翘睫双眼皮后悔了

    ...

    2024/3/14 18:40:22
  13. 双眼皮手术日记

    ...

    2024/3/15 14:48:49
  14. 宁波壹加壹征集无痕双眼皮手术过程紧张吗

    ...

    2024/3/15 14:48:48
  15. 长岭县合肥微创双眼皮整形

    ...

    2024/3/15 14:48:47
  16. 全切双眼皮会越修越失败吗

    ...

    2024/3/20 18:47:59
  17. 宜昌双眼皮价格是多少

    ...

    2024/3/15 14:48:45
  18. 割完双眼皮可以吃葱吗

    ...

    2024/3/13 18:58:45
  19. [Angular]——动态增加表单项

    动态增加表单 这个问题的环境是基于Angular10和NG-ZORRO&#xff0c;nz中的动态表单案例是有个触发机制的——点击按钮&#xff0c;而有时候页面的显示是不需要手动触发的。先从后台取回数据&#xff0c;在进行数据的渲染。取回的数据大多是数组&#xff0c;所以案例中的就不可…...

    2024/3/13 18:58:45
  20. Angular实现表单功能

    技术涉及 双向数据绑定 ng-repeat、 ng-show指令和数组排序等知识。实现了表单的增、删和排序的功能 代码如下&#xff1a; <!DOCTYPE html> <html ng-app"myapp"><head><meta charset"UTF-8"><title>模拟表单</title&…...

    2024/3/13 18:58:43

最新文章

  1. 14 Games101 - 笔记 - 光线追踪(利用包围盒技术加速光线追踪(KD-Tree and BVH)

    14 光线追踪&#xff08;利用包围盒技术加速光线追踪&#xff08;KD-Tree and BVH&#xff09; 在上一节中&#xff0c;我们介绍了whited-style光线追踪的原理&#xff0c;以及实现细节。相比与光栅化中所使用的的Blinn-Phong模型&#xff0c;光线追踪显著了提升了图像质量&am…...

    2024/3/29 18:00:35
  2. 梯度消失和梯度爆炸的一些处理方法

    在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言&#xff0c;在此感激不尽。 权重和梯度的更新公式如下&#xff1a; w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...

    2024/3/20 10:50:27
  3. 用XMLHttpRequest发送和接收JSON数据

    百度的AI回答了一个案例&#xff1a; var xhr new XMLHttpRequest(); var url "your_endpoint_url"; // 替换为你的API端点 var data JSON.stringify({key1: "value1",key2: "value2" });xhr.open("POST", url, true); xhr.setReq…...

    2024/3/29 10:30:42
  4. css3鼠标悬停图片特效,图片悬停效果源码

    特效介绍 css3鼠标悬停图片特效,图片悬停效果源码&#xff0c;可以在网页上面作为自己的动态加载名片&#xff0c;放到侧边栏或者网站合适的位置即可 动态效果 代码下载 css3鼠标悬停图片特效,图片悬停效果源码...

    2024/3/28 10:42:14
  5. 【外汇早评】美通胀数据走低,美元调整

    原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...

    2024/3/27 10:21:24
  6. 【原油贵金属周评】原油多头拥挤,价格调整

    原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...

    2024/3/24 20:11:25
  7. 【外汇周评】靓丽非农不及疲软通胀影响

    原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...

    2024/3/29 2:45:46
  8. 【原油贵金属早评】库存继续增加,油价收跌

    原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...

    2024/3/29 16:26:39
  9. 【外汇早评】日本央行会议纪要不改日元强势

    原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...

    2024/3/29 5:19:52
  10. 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响

    原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...

    2024/3/28 17:01:12
  11. 【外汇早评】美欲与伊朗重谈协议

    原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...

    2024/3/29 11:11:56
  12. 【原油贵金属早评】波动率飙升,市场情绪动荡

    原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...

    2024/3/29 1:13:26
  13. 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试

    原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...

    2024/3/29 8:28:16
  14. 【原油贵金属早评】市场情绪继续恶化,黄金上破

    原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...

    2024/3/29 7:41:19
  15. 【外汇早评】美伊僵持,风险情绪继续升温

    原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...

    2024/3/24 20:11:18
  16. 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势

    原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...

    2024/3/29 9:57:23
  17. 氧生福地 玩美北湖(上)——为时光守候两千年

    原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...

    2024/3/29 0:49:46
  18. 氧生福地 玩美北湖(中)——永春梯田里的美与鲜

    原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...

    2024/3/24 20:11:15
  19. 氧生福地 玩美北湖(下)——奔跑吧骚年!

    原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...

    2024/3/29 17:27:19
  20. 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!

    原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...

    2024/3/24 20:11:13
  21. 「发现」铁皮石斛仙草之神奇功效用于医用面膜

    原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...

    2024/3/26 11:21:23
  22. 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者

    原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...

    2024/3/28 18:26:34
  23. 广州械字号面膜生产厂家OEM/ODM4项须知!

    原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...

    2024/3/28 12:42:28
  24. 械字号医用眼膜缓解用眼过度到底有无作用?

    原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...

    2024/3/28 20:09:10
  25. 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...

    解析如下&#xff1a;1、长按电脑电源键直至关机&#xff0c;然后再按一次电源健重启电脑&#xff0c;按F8健进入安全模式2、安全模式下进入Windows系统桌面后&#xff0c;按住“winR”打开运行窗口&#xff0c;输入“services.msc”打开服务设置3、在服务界面&#xff0c;选中…...

    2022/11/19 21:17:18
  26. 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。

    %读入6幅图像&#xff08;每一幅图像的大小是564*564&#xff09; f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...

    2022/11/19 21:17:16
  27. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...

    win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面&#xff0c;在等待界面中我们需要等待操作结束才能关机&#xff0c;虽然这比较麻烦&#xff0c;但是对系统进行配置和升级…...

    2022/11/19 21:17:15
  28. 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...

    有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows&#xff0c;请勿关闭计算机”的提示&#xff0c;要过很久才能进入系统&#xff0c;有的用户甚至几个小时也无法进入&#xff0c;下面就教大家这个问题的解决方法。第一种方法&#xff1a;我们首先在左下角的“开始…...

    2022/11/19 21:17:14
  29. win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...

    置信有很多用户都跟小编一样遇到过这样的问题&#xff0c;电脑时发现开机屏幕显现“正在配置Windows Update&#xff0c;请勿关机”(如下图所示)&#xff0c;而且还需求等大约5分钟才干进入系统。这是怎样回事呢&#xff1f;一切都是正常操作的&#xff0c;为什么开时机呈现“正…...

    2022/11/19 21:17:13
  30. 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...

    Win7系统开机启动时总是出现“配置Windows请勿关机”的提示&#xff0c;没过几秒后电脑自动重启&#xff0c;每次开机都这样无法进入系统&#xff0c;此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一&#xff1a;开机按下F8&#xff0c;在出现的Windows高级启动选…...

    2022/11/19 21:17:12
  31. 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...

    有不少windows10系统用户反映说碰到这样一个情况&#xff0c;就是电脑提示正在准备windows请勿关闭计算机&#xff0c;碰到这样的问题该怎么解决呢&#xff0c;现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法&#xff1a;1、2、依次…...

    2022/11/19 21:17:11
  32. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...

    今天和大家分享一下win7系统重装了Win7旗舰版系统后&#xff0c;每次关机的时候桌面上都会显示一个“配置Windows Update的界面&#xff0c;提示请勿关闭计算机”&#xff0c;每次停留好几分钟才能正常关机&#xff0c;导致什么情况引起的呢&#xff1f;出现配置Windows Update…...

    2022/11/19 21:17:10
  33. 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...

    只能是等着&#xff0c;别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚&#xff0c;只能是考虑备份数据后重装系统了。解决来方案一&#xff1a;管理员运行cmd&#xff1a;net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...

    2022/11/19 21:17:09
  34. 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?

    原标题&#xff1a;电脑提示“配置Windows Update请勿关闭计算机”怎么办&#xff1f;win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢&#xff1f;一般的方…...

    2022/11/19 21:17:08
  35. 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...

    关机提示 windows7 正在配置windows 请勿关闭计算机 &#xff0c;然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;关机提示 windows7 正在配…...

    2022/11/19 21:17:05
  36. 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...

    钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...

    2022/11/19 21:17:05
  37. 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...

    前几天班里有位学生电脑(windows 7系统)出问题了&#xff0c;具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面&#xff0c;长时间没反应&#xff0c;无法进入系统。这个问题原来帮其他同学也解决过&#xff0c;网上搜了不少资料&#x…...

    2022/11/19 21:17:04
  38. 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...

    本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法&#xff0c;并在最后教给你1种保护系统安全的好方法&#xff0c;一起来看看&#xff01;电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中&#xff0c;添加了1个新功能在“磁…...

    2022/11/19 21:17:03
  39. 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...

    许多用户在长期不使用电脑的时候&#xff0c;开启电脑发现电脑显示&#xff1a;配置windows更新失败&#xff0c;正在还原更改&#xff0c;请勿关闭计算机。。.这要怎么办呢&#xff1f;下面小编就带着大家一起看看吧&#xff01;如果能够正常进入系统&#xff0c;建议您暂时移…...

    2022/11/19 21:17:02
  40. 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...

    配置windows update失败 还原更改 请勿关闭计算机&#xff0c;电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;配置windows update失败 还原更改 请勿关闭计算机&#x…...

    2022/11/19 21:17:01
  41. 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...

    不知道大家有没有遇到过这样的一个问题&#xff0c;就是我们的win7系统在关机的时候&#xff0c;总是喜欢显示“准备配置windows&#xff0c;请勿关机”这样的一个页面&#xff0c;没有什么大碍&#xff0c;但是如果一直等着的话就要两个小时甚至更久都关不了机&#xff0c;非常…...

    2022/11/19 21:17:00
  42. 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...

    当电脑出现正在准备配置windows请勿关闭计算机时&#xff0c;一般是您正对windows进行升级&#xff0c;但是这个要是长时间没有反应&#xff0c;我们不能再傻等下去了。可能是电脑出了别的问题了&#xff0c;来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...

    2022/11/19 21:16:59
  43. 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...

    我们使用电脑的过程中有时会遇到这种情况&#xff0c;当我们打开电脑之后&#xff0c;发现一直停留在一个界面&#xff1a;“配置Windows Update失败&#xff0c;还原更改请勿关闭计算机”&#xff0c;等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢&#xff0…...

    2022/11/19 21:16:58
  44. 如何在iPhone上关闭“请勿打扰”

    Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...

    2022/11/19 21:16:57