在指令类中,使用ElementRef来获取对宿主元素的引用,并使用Renderer2来修改宿主元素的属性。在构造函数中注入ElementRef和Renderer2: 在指令的ngOnInit方法中,使用Renderer2的addClass方法来添加class。例如,添加名为my-class的class: 在指令的ngOnInit方法中,使用Renderer2的addClas
import{Component,ElementRef,AfterViewInit,OnDestroy}from'@angular/core';@Component({selector:'my-app',templateUrl:'./app.component.html',styleUrls: ['./app.component.css'] })exportclassAppComponentimplementsAfterViewInit,OnDestroy{constructor(privateelementRef: ElementRef) { }ngAfterViewInit() {cons...
constructor(private elementRef: ElementRef) { let divEle=this.elementRef.nativeElement.querySelector('div'); console.dir(divEle); } } 运行上面代码,在控制台中没有出现异常,但是输出的结果却是 null 。 原因分析:没有抛出异常,我们可以推断 this.elementRef.nativeElement 这个对象是存在,但却找不到它的子...
// 在构造函数中 this.elementRef = elementRef 是可选的,编译时会自动赋值 // function AppComponent(elementRef) { this.elementRef = elementRef; } constructor(private elementRef: ElementRef) { } ngAfterViewInit() { // 模板中的元素已创建完成 console.dir(this.elementRef.nativeElement.querySelector('d...
const classList = Object.entries(ngClassStyles) .filter(([key, value]) => value) .map(([key, value]) => key) .join(' '); this.renderer.addClass(element, classList); } } 在你的组件中使用该服务: 代码语言:txt 复制 import { Component, ElementRef, OnInit } from '@angular/core';...
elementRef.nativeElement, 'margin-right', `-${Number(this.space) / 2}rem`); } // 设置行中列的水平排列方式 setJustify() { if (!this.justify) return; this.renderer.addClass(this.elementRef.nativeElement, `x-justify-${this.justify}`); } // 设置行中列的垂直排列方式 setAlign() { if...
[class.ant-input-lg]':`nzSize === 'large'`,'[class.ant-input-sm]':`nzSize === 'small'`}})exportclassNzInputDirective{@Input()nzSize:NzSizeLDSType='default';@Input()@InputBoolean()disabled=false;constructor(renderer:Renderer2,elementRef:ElementRef){renderer.addClass(elementRef.native...
为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异。比如定义了抽象类 Renderer、Renderer2 、抽象类 RootRenderer 等。此外还定义了以下引用类型:ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。 本文的主要内容是分析 Angular 中 Renderer (渲染器),不过在进行具体分析前,我们先来...
constructor(element:ElementRef,@Attribute('store-mydirective-class')bgClass:string) { // 将宿主元素的背景类追加bg-info element.nativeElement.classList.add(bgClass||'bg-info'); } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. ...
export class ExeComponent { constructor(private renderer: Renderer2, elRef: ElementRef) { this.renderer.setProperty(elRef.nativeElement, 'author', 'semlinker'); } } 以上代码中,我们利用构造注入的方式,注入 Renderer2 和 ElementRef 实例。有些读者可能会问,注入的实例对象是怎么生成的。这里我们只是稍微...