使布尔变量在父范围内可用
Making boolean variable available in parent scope
给定以下组件
export class VideoPlayerComponent implements AfterViewInit {
@ViewChild('videoPlayer', { static: false })
videoPlayer: ElementRef;
@Input()
videoUrl: string;
@Input()
videoType: string;
/** Subject that emits when the component has been destroyed. */
@Output()
onPlayerEvent = new EventEmitter<VideoPlayerEvent>();
videoJsPlayer: videojs.Player;
showTimestamp: boolean = false;
timeStamp: string;
constructor() { }
ngAfterViewInit() {
if (this.videoUrl) {
const self = this;
this.videoJsPlayer = videojs(this.videoPlayer.nativeElement, {}, function () {
this.on('play', () => self.onPlayerEvent.emit('play'));
this.on('pause', () => self.onPlayerEvent.emit('pause'));
this.on('ended', () => self.onPlayerEvent.emit('ended'));
return hls;
});
const myButton = this.videoJsPlayer.controlBar.addChild("button");
const myButtonDom = myButton.el();
myButtonDom.innerHTML = "<i class=\"material-icons\">\n" +
"query_builder\n" +
"</i>";
// @ts-ignore
myButtonDom.onclick = function(){
console.log('click');
this.showTimestamp = !this.showTimestamp;
console.log(this.showTimestamp);
};
}
}
}
我试图在 onclick 事件发生时切换 'showTimestamp' 变量。这似乎是在 'function(){}' 的范围内更新,但这并不是在整个组件的范围内更新。
我该如何解决这个问题?
您的非Angular方法存在一些问题。
主要问题是一个经典的 Javascript 问题 - this
在函数中声明如下: function() { }
指的是函数本身。要引用外部作用域,您应该使用箭头表示法声明函数。
myButtonDom.onclick = () => {
console.log('click');
this.showTimestamp = !this.showTimestamp;
console.log(this.showTimestamp);
};
但是 你不应该在 Angular 项目中手动操作 DOM。您将动态构建 HTML 并将点击事件绑定到 HTML.
中的处理程序
我不知道您的 HTML 要求是什么,但您可以像这样绑定点击处理程序:
<button (click)="myClickHandler()">
Click me
</button>
给定以下组件
export class VideoPlayerComponent implements AfterViewInit {
@ViewChild('videoPlayer', { static: false })
videoPlayer: ElementRef;
@Input()
videoUrl: string;
@Input()
videoType: string;
/** Subject that emits when the component has been destroyed. */
@Output()
onPlayerEvent = new EventEmitter<VideoPlayerEvent>();
videoJsPlayer: videojs.Player;
showTimestamp: boolean = false;
timeStamp: string;
constructor() { }
ngAfterViewInit() {
if (this.videoUrl) {
const self = this;
this.videoJsPlayer = videojs(this.videoPlayer.nativeElement, {}, function () {
this.on('play', () => self.onPlayerEvent.emit('play'));
this.on('pause', () => self.onPlayerEvent.emit('pause'));
this.on('ended', () => self.onPlayerEvent.emit('ended'));
return hls;
});
const myButton = this.videoJsPlayer.controlBar.addChild("button");
const myButtonDom = myButton.el();
myButtonDom.innerHTML = "<i class=\"material-icons\">\n" +
"query_builder\n" +
"</i>";
// @ts-ignore
myButtonDom.onclick = function(){
console.log('click');
this.showTimestamp = !this.showTimestamp;
console.log(this.showTimestamp);
};
}
}
}
我试图在 onclick 事件发生时切换 'showTimestamp' 变量。这似乎是在 'function(){}' 的范围内更新,但这并不是在整个组件的范围内更新。
我该如何解决这个问题?
您的非Angular方法存在一些问题。
主要问题是一个经典的 Javascript 问题 - this
在函数中声明如下: function() { }
指的是函数本身。要引用外部作用域,您应该使用箭头表示法声明函数。
myButtonDom.onclick = () => {
console.log('click');
this.showTimestamp = !this.showTimestamp;
console.log(this.showTimestamp);
};
但是 你不应该在 Angular 项目中手动操作 DOM。您将动态构建 HTML 并将点击事件绑定到 HTML.
中的处理程序我不知道您的 HTML 要求是什么,但您可以像这样绑定点击处理程序:
<button (click)="myClickHandler()">
Click me
</button>