参考资料
https://www.freecodecamp.org/news/
https://kb.kutu66.com/tag/javascript
https://t.codebug.vip/
https://javascript-conference.com/blog/
https://www.tektutorialshub.com/ 这个教程不错
https://www.concretepage.com/ 这两个
https://blog.kevinyang.net/ 还有这个
https://www.concretepage.com/angular
https://morioh.com/
https://dev.to/
https://codinglatte.com/
http://gdut_yy.gitee.io/doc-csstdg4/#features CSS 权威指南 4th
https://www.bennadel.com/blog/complete-blog-entry-list.htm
https://blog.angular-university.io/
https://www.c-sharpcorner.com/
https://www.madewithangular.com/
https://indepth.dev/
angular9调试
不知道其他版本能不能,我用的angular9
html <app-one id="ccc"></app-one> 组件里面 public titles: string = 'hello angular'; {{titles}}在浏览器控制台
let a=document.querySelector('#ccc'); // 拿到这个组件 let b=ng.getComponent(a) // 修改值 b.titles=10 //但是发现页面没有被改变 ng.applyChanges(a) //页面数据更新啦
main.ts应用程序入口点
11 行
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
platformBrowserDynamic是模块,负责在桌面浏览器中加载Angular应用程序
然后调用根模块bootstrapModule
ngModel
ngModel不属于Angular/Core 库,他属于angular/forms
所以你要在模块里面引入FormsModule
import { FormsModule } from '@angular/forms';
(input)
<input (input)="add($event)">
add(val) {
console.log(val.target.value);
}
这种方式是拿到DOM类型
利用模板引擎拿到传递的值
<input #els (input)="add(els)">
add(event) {
let a = (<HTMLInputElement> event.target).value;
console.log(a);
}
<input (keyup.enter)="value2=$event.target.value">
<input (keyup.control.shift.enter)="value4=$event.target.value"> // 组合键
<input type="text" class="form-control" [(ngModel)]="courseName" >
https://www.tektutorialshub.com/angular/angular-adding-child-component/
ng-content 内容投影
<app-home>
<h1>Heroic Title</h1>
<p>Something good...</p>
<app-nav></app-nav>
</app-home>
app-home.components.html
<ng-content select="app-nav"></ng-content>
<ng-content></ng-content>
展示的内容就是
app-nav // 这个组件的内容
<h1>Heroic Title</h1>
<p>Something good...</p>
如果是特定的属性的元素
<ng-content select="[app-nav]"></ng-content>
NgComponentOutlet
把组件插入视图中
<div *ngFor="let item of arr1"> <ng-container *ngComponentOutlet="item"></ng-container> </div> public arr1: any[] = [TextThreeComponent, TextTwoComponent];
NgTemplateOutlet
<ng-container *ngTemplateOutlet="greet"></ng-container>
<ng-template #greet><span>Hello</span></ng-template>
ng-container
是一个分组的元素,不会干扰样式或布局,因为Angular不会把他放在dom中
<ng-container> <div>1231</div> <div>345</div> <div>123</div> </ng-container> 也可以用作条件的判断 <p> I turned the corner <ng-container *ngIf="hero"> and saw {{hero.name}}. I waved </ng-container> and continued on my way. </p>
ng-template
也可以动态的创建模板
priblic a=1
---------
<div *ngIf="a==2; else add">
显示
</div>
<ng-template #add>
<div>我是独立的div</div>
</ng-template>
------
<ng-container *ngTemplateOutlet="loading"></ng-container>
<ng-template #loading>
<div>loading</div>
</ng-template>
点击的时候禁用input框
public control = new FormControl('xxxx');
clickDown() {
// emitEvent: false 不出发 valueChange
this.control.enabled ? this.control.disable({emitEvent: false}) : this.control.enable({emitEvent: false});
}
<input [formControl]="control">
<button (click)="clickDown()">点我</button>
RXJS
需求一个流用来监听a
当点击时候,第二个流用来监听b
export class ComponentOneComponent implements OnInit, AfterViewInit, OnDestroy { constructor() { } ngAfterViewInit(): void { } fromKeyDown(str) { fromEvent<KeyboardEvent>(document, 'keydown').pipe( map(e => e.key), filter(key => key === str) ).subscribe(res => { console.log(res); }) } ngOnInit(): void { // 第一个流用来监听a // 当点击按钮的时候,第二个流用来监听b this.fromKeyDown('a'); fromEvent(document.querySelector('button'),'click').subscribe(()=>{ this.fromKeyDown('b') }) } }补充一个小知识点
let sub = new Subject(); sub.subscribe(res=>{ console.log(res); }); sub.next(1); sub.next(2); sub.subscribe(res=>{ console.log(res); })
Form
如果出现'hasError' of null 报错
export class AppComponent {
form = this.formBuilder.group({
firstName: [''],
lastName: [''],
age: [''],
});
controls = {
firstName: this.form.get('firstName'),
lastName: this.form.get('lastName'),
}
constructor(private formBuilder: FormBuilder) {}
}
<form [formGroup]="form">
<div>
<label for="firstName">First Name</label>
<input formControlName="firstName" id="firstName"/>
<span *ngIf="controls.lastName.touched && controls.firstName.hasError('required')" class="errors">
Field is required
</span>
</div>
<div>
<label for="lastName">First Name</label>
<input formControlName="lastName" id="lastName"/>
<span *ngIf="controls.lastName.touched && controls.lastName.hasError('required')" class="errors">
Field is required
</span>
</div>
</form>
DecimalPipe
将数字转换为字符串
{{xxx |number:a.b-c}} a: 小数点前最小的整数位数,默认为1 b: 小数点后的最小位数,默认0 c: 小数点后的最大位数,默认3num=4.9734 {{num|number:'1.1-2'}} //最小1位数,最大两位数,第3位会四舍五入 // 4.97 num=4.978 // 4.98 num=4.403 //4.4 num=4.905 // 4.91