从Angular2控制器中的模板访问局部变量

Posted 2023-03-13

【中文标题】从Angular2控制器中的模板访问局部变量

【英文标题】：Access a local variable from the template in the controller in Angular2

【发布时间】：2016-04-03 17:54:10

【问题描述】：

我正在编写一个需要访问 <audio controls> 本机元素的组件。我现在这样做是通过使用ElementRef 像这样this.elementRef.nativeElement.querySelector("audio"); 将其放入ngOnInit() 中的@

虽然它有效，但我认为它非常不雅，Angular2 也是 warns of the risks when using ElementRef..

真的没有更简单的方法吗？

我可以使用<audio controls #player> 将其标记为局部变量，并通过this.player 或控制器中的类似内容以某种方式访问​​本机元素吗？

import Component, OnInit, ElementRef, Input from 'angular2/core';

@Component(
    selector: 'audio-preview',
    template: `
        <audio controls>
            <source [src]="src" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    `
)

export class AudioPreview implements OnInit 

    @Input() src: string;

    constructor(public elementRef: ElementRef) 

    ngOnInit() 
        var audioElement = this.getAudioElement();
        audioElement.setAttribute('src', this.src);
    

    getAudioElement() : htmlAudioElement 
        return this.elementRef.nativeElement.querySelector("audio");
    

【参考方案1】：

使用@ViewChild 访问视图中的某些元素。 使用[attr.src] 创建与元素的“src”属性的绑定。 如果由于某种原因需要强制更改 DOM，请使用 Renderer。

见this plunk。

import Component, Input, ViewChild, Renderer from 'angular2/core';

@Component(
  selector: 'audio-preview',
  template: `
    <audio controls #player [attr.src]="src">
      <source [src]="src" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
    `
)
export class AudioPreview 
  @Input() src: string;
  @ViewChild('player') player;

  constructor(public renderer: Renderer) 

  ngAfterViewInit() 
    console.log(this.player);

    // Another way to set attribute value to element
    // this.renderer.setElementAttribute(this.player, 'src', this.src);
  

【讨论】：

谢谢！！我刚试了一下，<audio controls #player [attr.src]="src"> 好像和<audio controls #player [src]="src"> 一样。。。有什么区别？

@skovmand [attr.src] 使用 DOM 的 setAttribute() 方法 (element.setAttribute('src', src)) 创建与元素属性的绑定。 [src] 创建到元素属性的绑定（只需通过 element.src = src 设置它）

我不得不问...您从哪里了解到在模板中使用#player，然后能够使用ViewChild('player') 获得对它的引用？ （我需要开始阅读您正在阅读的任何内容，因为我在 Angular 文档中找不到此类信息。ViewChild API page 没有解释这一点。）

我最终找到了它。 source code for ViewChild 表示“支持与 QueryMetadata 相同的查询参数，descendants 除外。” QueryMetadata API doc 解释了支持的不同选择器。

@MarkRajcok 实际上我没有读过一些关于 angular2 的“秘密”特别书籍或文章。我从源代码和他们的测试中学到了几乎所有关于 angular2 的东西。例如here 是@Query('something') 的测试。