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

 *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/

父组件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对获取到的元素进行样式的处理。