angular9的学习(十二)插槽

参考资料

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

组件里面
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)

add(val) {
    console.log(val.target.value);
  }

这种方式是拿到DOM类型

利用模板引擎拿到传递的值

 add(event) {
    let a = ( event.target).value;
    console.log(a);
  }

 // 组合键

https://www.tektutorialshub.com/angular/angular-adding-child-component/

ng-content 内容投影

    
Heroic Title
    
Something good...
	
   

app-home.components.html




展示的内容就是
	app-nav // 这个组件的内容
    
Heroic Title
    
Something good...

如果是特定的属性的元素

NgComponentOutlet

把组件插入视图中

  


public arr1: any[] = [TextThreeComponent, TextTwoComponent];

NgTemplateOutlet

Hello

ng-container

是一个分组的元素,不会干扰样式或布局,因为Angular不会把他放在dom中

 
1231
 
345
 
123

也可以用作条件的判断

  I turned the corner
  
    and saw {{hero.name}}. I waved
  
  and continued on my way.

ng-template

也可以动态的创建模板

priblic a=1
---------

  显示



  
我是独立的div

------



    
loading

点击的时候禁用input框

  public control = new FormControl('xxxx');

 clickDown() {
    // emitEvent: false  不出发 valueChange
    this.control.enabled ? this.control.disable({emitEvent: false}) : this.control.enable({emitEvent: false});
  }

点我

RXJS

需求一个流用来监听a

当点击时候,第二个流用来监听b

export class ComponentOneComponent implements OnInit, AfterViewInit, OnDestroy {

  constructor() {

  }

  ngAfterViewInit(): void {

  }

  fromKeyDown(str) {
    fromEvent(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) {}
}

  

    First Name
    
    
      Field is required
    
  

  

    First Name
    
    
      Field is required
    
  

DecimalPipe

将数字转换为字符串

{{xxx |number:a.b-c}}
a: 小数点前最小的整数位数,默认为1
b: 小数点后的最小位数,默认0
c: 小数点后的最大位数,默认3

num=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