从模板中Angular2控制器访问本地变量 [英] Access a local variable from the template in the controller in Angular2

问题描述

我写，我需要访问℃的组成部分;音频控制＆GT; 本地元素。我现在正在做它像这样通过使用 ElementRef 这样的 ngOnInit（） > this.elementRef.nativeElement.querySelector（音频）;

虽然它的工作，我认为这是非常unelegant和Angular2也警告使用ElementRef ..

难道真的没有更简单的方法？

我可以将其标记为一个局部变量＆LT;音频控制＃播放器＆GT; 并通过 this.player 或从控制器相似的地方？

 进口{组件，OnInit的，ElementRef，输入}从'angular2 /核心;@零件（{
    选择：音频preVIEW'，
    模板：`
        ＆LT;音频控制＆GT;
            ＆lt;信源[来源] =SRCTYPE =音频/ MPEG＆GT;
            你的浏览器不支持音频元素。
        ＆LT; /音频＆GT;
    `
}）出口类音频preVIEW实现的OnInit {    @input（）SRC：字符串;    构造函数（公共elementRef：ElementRef）{}    ngOnInit（）{
        变种audioElement = this.getAudioElement（）;
        audioElement.setAttribute（'src'中，this.src）;
    }    getAudioElement（）{HTMLAudioElement
        返回this.elementRef.nativeElement.querySelector（音频）;
    }
}
 




解决方案

1. 使用 @ViewChild 访问某些元素在视图中。


2. 使用 [ attr.src] 创建绑定到一个元素的SRC属性。


3. 使用 渲染 如果由于某种原因，你需要势在必行改变DOM。

请参阅这个普拉克。

进口{组件，输入，ViewChild，渲染器}从'angular2 /核心;@零件（{
  选择：音频preVIEW'，
  模板：`
    ＆LT;音响控制#player [attr.src] =SRC＆GT;
      ＆lt;信源[来源] =SRCTYPE =音频/ MPEG＆GT;
      你的浏览器不支持音频元素。
    ＆LT; /音频＆GT;
    `
}）
出口类音频$ P $ {PVIEW
  @input（）SRC：字符串;
  @ViewChild（'玩家'）的球员;  构造函数（公共渲染：渲染器）{}  ngAfterViewInit（）{
    的console.log（this.player）;    //另一种方式来设置属性值元素
    // this.renderer.setElementAttribute（this.player，'src'中，this.src）;
  }
}


I am writing a component where I need access to the <audio controls> native element. I am doing it like this now by getting it in ngOnInit() by using ElementRef like this this.elementRef.nativeElement.querySelector("audio");

While it works I think it is very unelegant and Angular2 also warns of the risks when using ElementRef..

Is there really no simpler way?

Can I mark it as a local variable with <audio controls #player> and somehow access the native element through this.player or something similar from the controller?

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. Use @ViewChild to access some element in the view.
2. Use [attr.src] to creating binding to 'src' attribute of an element.
3. Use Renderer if for some reason you need to change the DOM imperatively.

See 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);
  }
}

这篇关于从模板中Angular2控制器访问本地变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！