Question

我已经读过，使用ElementRef直接操纵DOM是不可取的。但是，我在网上看到的大多数示例似乎都直接使用ElementRef。使用ElementRef是错误的吗？

例如

@Component({
    selector: 'sample',
    template: `
        <span #tref>I am span</span>
    `
})
export class SampleComponent implements AfterViewInit {
    @ViewChild("tref", {read: ElementRef}) tref: ElementRef;

    ngAfterViewInit(): void {
        // outputs `I am span`
        console.log(this.tref.nativeElement.textContent);
    }
}

或

@Component({
    selector: 'sample',
    template: `
        <span >I am span</span>


export class SampleComponent{
    constructor(private hostElement: ElementRef) {
        //outputs <sample>...</sample>
        console.log(this.hostElement.nativeElement.outerHTML);
    }

问题1

以上示例是否可移植？如果现在，我该怎么做才能使它们便携？

问题2 我查看了ElementRef的课程。它只有一个成员nativeElement，这可能是另一个抽象。我在哪里可以找到有关nativeElement中可用方法的更多信息？使用这些方法是否安全？

Answer 1

nativeElement只是一个DOM对象，因为你会得到document.getElementById()的基本javascript API（你可以查看MDN来学习内部的javascript API）。 / p>

Angular的原则是使用有角度，除非你不能。如果达到框架的限制，则应使用ElementRef来处理元素。

例如，最近我在使用DOM元素滚动时创建了一个视差效果。

对于基本的CRUD / Ajax操作，您应该只使用Angular

使用ElementRef是否安全（从可移植性的角度来看）

1 个答案: