有人知道如何获取组件模板中定义的元素吗？聚合物使得它真正用简单的$和$$.
我只是想知道如何在Angular中实现它.
以教程为例:
import {Component} from '@angular/core'
@Component({
selector:'display'
template:`
<input #myname(input)="updateName(myname.value)"/>
<p>My name : {{myName}}</p>
`
})
export class DisplayComponent {
myName: string = "Aman";
updateName(input: String) {
this.myName = input;
}
}
如何从类定义中捕获por input元素的引用？
在AngularJS中,您可以使用$watch函数来指定观察者观察范围变量的变化$scope.在Angular中观察变量(例如,组件变量)的等价物是什么？
我正在编写一个组件,我需要访问本<audio controls>机元素.我现在正在做它像这样通过获取它ngOnInit()通过使用ElementRef这样的this.elementRef.nativeElement.querySelector("audio");
虽然它有效,但我认为它非常不优雅,Angular2也警告使用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");
}
}
我需要能够在发生某些事件时将焦点切换到输入元素.我如何在Angular 2中做到这一点？
例如:
<input (keyUp)="processKeyUp($event)"/>
<input (focusme)="alert('i am focused')"/>
我希望在第一个按下某个键时聚焦第二个输入框.我想我需要使用自定义事件(focusme在代码片段中),但我不知道在何处或如何声明它,以及是否为其使用@Directive注释,或以某种方式将其定义包含在组件中.总之,我很难过.
UPDATE
忘了提,我知道我可以通过在html中使用局部变量来做到这一点,但我希望能够从组件中做到这一点,并且我希望能够在触发focusme事件时执行复杂的逻辑,以便控件可以监听它可以确定它是否适合他们.谢谢!
假设我在Angular 2中有一个这样的组件.
@Component ({
directives: [Timeline, VideoPlayer],
template: `<div>
<span id="myId"></span>
<videoplayer [mode]="mode"></videoplayer>
<timeline [mode]="mode"></timeline>
</div>`,
})
export class VideoEditor {
}
如何从模板中获取对元素的引用？例如,我如何获得对<span>？的引用？
到目前为止我找到了两种方法:
1)使用ElementRef获取参考
export class VideoEditor {
constructor (private el: ElementRef) {
el.nativeElement.getElementsBy.....;
}
}
2)使用ViewChild
export class VideoEditor {
@ViewChild(Timeline) timeline: Timeline;
ngAfterViewInit () {
this.timeline;
}
}
3)使用本地模板变量
1)我不喜欢第一种方法是我需要做类似getElementsBy...功能.
2)关于第二个,我不知道如何访问HTML元素,我只能访问另一个子组件.如果我有更多相同类型的子组件怎么办？
3)本地模板变量只能在模板中使用,对吗？
在Angular 2中获取模板引用的最佳方法是什么？我想要像React这样的东西有 https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute
<input ref="myInput" />
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = …我在做什么我
有一个*ngIf基于简单布尔值隐藏/显示使用的组件.当组件变得可见时,我想将焦点应用于其模板中的子元素.
问题
如果我翻转布尔值,组件正确显示,但如果我尝试使用this._elRef.nativeElement.querySelector("div#test")它来获取对子元素的引用,则返回null.如果我等待几秒钟,相同的代码将返回对我所期望的元素的引用.
猜测
我假设在翻转布尔角后经过整个渲染周期以显示新的可见组件,并且在我querySelector()在下一行中应用时尚未完成.
我想知道的是
所以我想知道的是,我怎样才能确定我ngIf已经生效并且元素是他们在DOM中被选中的？
是否存在回调ngIf或者我是否可以强制视图更新并从中获取回调？
我希望这是有道理的.这是一个漫长的一天(漫长的一周),我太累了.
谢谢大家
如果它有帮助,我正在使用Angular2 v2.0.0-beta.15
我正在尝试建立一个Angular2组件，该组件自动聚焦通过内容投影插入的输入元素。
我正在使用的解决方案基于此答案。我还有一个额外的要求，即输入元素可能嵌套在另一个组件中。但是，我发现该ContentChild查询无法检测埋在ng-content标签内部的元素。
@Component({
selector: 'inner-feature',
template: "<input auto-focus>",
directives: [AutoFocus]
})
export class InnerFeature { }
@Component({
selector: 'feature',
template: `
<div [class.hide]="!show">
<ng-content></ng-content>
</div>
`
})
export class Feature {
@ContentChild(AutoFocus)
private _autoFocus: AutoFocus;
private _show: boolean = false;
@Input()
get show() {
return this._show;
}
set show(show: boolean) {
this._show = show;
if (show && this._autoFocus) {
setTimeout(() => this._autoFocus.focus());
}
}
}
@Component({
selector: 'my-app',
template: `
<div>
<button (click)="toggleFeature()">Toggle</button>
<feature …