【angular获取dom】【@ViewChild】【ElementRef】【Renderer2】【pipe】【subject】

冷不防 2024-04-20 09:35 68阅读 0赞

这里的 square 是个变量不是字符串，要让它是字符串应该加上引号。

`[nzStrokeLinecap]="'square'"`

--------------------

获取 dom 元素：

\* 可以通过 @ViewChil 获取【父子组件关系】的dom元素

export class ProtocolComponent implements OnInit { 
        @ViewChild(ProtocolMenuComponent, {static: false}) getKeyEsc: ProtocolMenuComponent |         any;
    
    //...
        constructor(private el: ElementRef) {} 
        ngOnInit() {
            console.log("father & child",this.el.nativeElement.querySelector('.card-list'))
        }
    }

ngAfterViewInit() {
        console.log(this.getKeyEsc.nativeElement.innerHTML); 
        this.getKeyEsc.nativeElement.innerHTML = "DOM updated succesfully!!!"; 
    }

demo： [https://stackblitz.com/edit/angular-8-viewchild-example-rwrpri][https_stackblitz.com_edit_angular-8-viewchild-example-rwrpri]

--------------------

不用【if】用【filter】：马克

不好的写法：

const x = fromEvent(this.el.nativeElement, 'keydown');
          x.subscribe((key: KeyboardEvent | any) => {
            if (key.keyCode == 27) {
              console.log("key esc")
              overlayRef.detach()
            }
          }, (e) => console.error(e))

好的写法：

enum KeyCode {
      ESC = 27
    }
    
        fromEvent<KeyboardEvent>(this.el.nativeElement, 'keydown')
          .pipe(filter(k => k.keyCode == KeyCode.ESC))
          .subscribe(
            () => {
              overlayRef.detach();
            },
            e => console.error(e)
          );

--------------------

export class AppComponent implements AfterViewInit {
      name = 'Angular';
      @ViewChild(HelloComponent, {static: false}) hello: HelloComponent | any;
      @ViewChild('div3', {static: false}) div3: ElementRef;
        ngAfterViewInit() {
        console.log('Hello ', this.hello.name); 
      }
      constructor(private el:ElementRef,
      private renderer2: Renderer2) {}
      ngOnInit() {
           console.log(this.el.nativeElement);
           console.log("222");
           console.log(this.el.nativeElement.querySelector('p'))
          //  console.log(this.div3.nativeElement);   失败？？？
           this.renderer2.setStyle(this.el.nativeElement.querySelector('.btn1'),'background','red');
      }
    }

以上代码在控制台打印如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

--------------------

马克：[https://stackoverflow.com/questions/50355584/observable-fromevent-rxjs][https_stackoverflow.com_questions_50355584_observable-fromevent-rxjs]

ngAfterViewInit() {
        Observable.fromEvent(this.elementRef.nativeElement, 'keyup')
          .pipe(
            debounceTime(this.debounceTime),
            distinctUntilChanged()
          )
          .subscribe(x => {
            this.onDebounce.emit(x);
          });
    
      }

## pipe ##

上面我们已经基本理解了**fromEvent** 的基本使用方法，主要分析的是**subscribe** 方法，我们现在有个需求，我们要控制Button , 在**3s** 时间内， 我们只能点击一次， 以防止，恶意点击按钮.**Rxjs** 都是基于流来操作，**Observable** 对象提供了一个**pipe**(管道)的方法， 在进入到**subscribe** 订阅者方法之前，所以的数据需要进行加工，异常处理， 以保证**subscribe**收到的是正确的数据

--------------------

一个简单的操作符demo

ngOnInit() {
        const x = of(2,3,4);
        const y = x.pipe(
          filter(n => n>3),
          map((n:number)=>n * 2))
        y.subscribe(x => {console.log(x)})
      }

--------------------

import { Subject, Observable, from } from 'rxjs';
    
    const subject = new Subject<number>();
    
    subject.subscribe({
      next: (v) => console.log(`observerA: ${v}`)
    });
    subject.subscribe({
      next: (v) => console.log(`observerB: ${v}`)
    });
     
    subject.next(1);
    // subject.next(2);
    
    // 分割 
    
    const observable = from([10, 20, 30]);
    const subscriptionX = observable.subscribe(x => console.log(x));
    const subscriptionY = observable.subscribe(x => console.log(x, 233));

控制台打印如下：

![20191015200254678.png][]

[https_stackblitz.com_edit_angular-8-viewchild-example-rwrpri]: https://stackblitz.com/edit/angular-8-viewchild-example-rwrpri
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5644c81a9cf84deaa6e60018a88bc057.png
[https_stackoverflow.com_questions_50355584_observable-fromevent-rxjs]: https://stackoverflow.com/questions/50355584/observable-fromevent-rxjs
[20191015200254678.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/af23bfc7b6c645e592e4c5c0bb8c8549.png