绑定dom angular 【结构型指令】@ViewChild ElementRef *ngTemplateOutlet

小灰灰 2023-06-07 15:29 25阅读 0赞

##  \*ngTemplateOutlet  ##

Angular [template outlets][] can be used to insert a common template in various sections of a view that are not generated by a loop or subject to a condition. For example, you can define a template for the logo of a company and insert it in several places.

模板可以像任何其他DOM元素或组件一样注入，通过提供模板引用名称 defaultTabButtons 到 ViewChild 装饰器。

这意味着模板也可以在组件类的级别访问，并且我们可以做一些事情，例如将它们传递给子组件。

参考链接：[https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/][https_blog.angular-university.io_angular-ng-template-ng-container-ngtemplateoutlet]

*父组件A：*

// html:
    <ng-template #customTabButtons>
          {
       { test }}
        </ng-template>
    
    <app-maintenance-user-hint
          [headerTemplate]="customTabButtons"
    ></app-maintenance-user-hint>
    
    // ts:
      test="from warm up";

* 子组件：*

// html:
    <ng-template #defaultTabButtons>
      <div class="default-tab-buttons">
        default ...
      </div>
    </ng-template>
    
    <ng-container
      *ngTemplateOutlet="headerTemplate ? headerTemplate : defaultTabButtons"
    >
    </ng-container>
    
    // ts:
    @Input() headerTemplate?: TemplateRef<any>;

显示：

只有在设置了headerTemplate的父组件，才会渲染：from warm up，其它父组件的话就渲染：default...

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

ngAfterViewInit() {
        fromEvent<WheelEvent>(
          this.el.nativeElement.querySelector('.title-box'),
          'wheel'
        )
          .pipe(filter(e => e.deltaY > 0))
          .subscribe(() => {
            this.el.nativeElement.querySelector('.title-box').scrollLeft += 100;
          });
    
        fromEvent<WheelEvent>(
          this.el.nativeElement.querySelector('.title-box'),
          'wheel'
        )
          .pipe(filter(e => e.deltaY < 0))
          .subscribe(() => {
            this.el.nativeElement.querySelector('.title-box').scrollLeft -= 100;
          });
      }

之前一直没有 querySelector成功 是没有在渲染后添加

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

## @ViewChild ##

@ViewChild和@ViewChildren用于从模板视图中获取匹配的元素，在父组件钩子方法ngAfterViewInit调用之前赋值。

常用的选择器：class，模板引用变量，TemplateRef。

### **使用：** ###

**1. DOM**

如果想通过@ViewChild、@ViewChildren访问到DOM节点的话都得先给相应的DOM节点设置模板引用变量。

*  获取宿主视图

// html:
    // <div #domLabel>abc</div>
    
     @ViewChild('domLabel', { static: true }) domLabelChild: ElementRef;
     ngAfterViewInit(): void {
        // DOM节点
        console.log(this.domLabelChild.nativeElement);
      }

*  获取嵌入视图

// html
    //<ng-template #domTemplate><div>默认我是不会显示的</div></ng-template>
    
      /**** DOM节点对应的 ****/
      @ViewChild('domTemplate', { static: true }) domTemplate: TemplateRef<any>; // 查找嵌入元素
      /**** @ViewChild(TemplateRef) @ViewChildren(TemplateRef)获取页面上的ng-template节点信息 ****/
      @ViewChild(TemplateRef, { static: true }) template: TemplateRef<any>;
      ngAfterViewInit(): void {
        // DOM节点
        console.log(this.domTemplate);
        console.log(this.template);
      }

**2. 父组件通过@viewChild调用子组件 **

// html:
    // <app-child #appChild></app-child>
    // <div (click)="test()">父组件的btn</div>
    
    /**** 组件 ****/
      @ViewChild('appChild', { static: true }) componentChild: ChildComponent; // 找到一个子组件
      @ViewChild('appChild', {read: ElementRef,static:true}) componentChildElement: ElementRef; // 直接找到子组件的DOM
    
    test() {
        this.appChild.go();
    }
    
    
    // 以上是父组件。以下是子组件
    
    go() {
    console.log(233)
    }

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

The core directives ng-container, ng-template and ngTemplateOutlet all combine together to allow us to create highly dynamical and customizable components.

The `<ng-template>` is an Angular element for rendering HTML. It is never displayed directly. Use for structural directives such as: ngIf, ngFor, ngSwitch,..

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

## **ElementRef类** ##

通过 ElementRef 我们就可以封装不同平台下视图层中的 native 元素 (在浏览器环境中，native 元素通常是指 DOM 元素)，最后借助于 Angular 提供的强大的依赖注入特性，我们就可以轻松地访问到 native 元素。

**console.log(this.elementRef.nativeElement.querySelector(‘div’)); 在AfterViewInit 钩子里获取到div这个dom元素。**

另外可通过Renderer2提供的API对获取到的元素进行样式的处理。

[template outlets]: https://angular.io/api/common/NgTemplateOutlet
[https_blog.angular-university.io_angular-ng-template-ng-container-ngtemplateoutlet]: https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/