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