[英]angular4 change detection update all components inside ngfor
我有兩個組件:
x-list-component 和 xcomponent。
x-list-component 使用 *ngfor='let VAR of array' 指令創建一個 xcomponent 列表,並將 VAR 作為 xcomponent 的輸入。
<xcomponent [VAR]='VAR'></xcomponent>
xcomponent 在模板中使用插值在 div 內呈現傳遞的 VAR。 {{VAR.args}}
一切正常,但是當更改檢測發生在 xcomponent 的一個實例中時,視圖會重新呈現,並且所有其他 xcomponents 會出現 VAR.args 的新值,而不是僅在修改其 VAR.args 的 xcomponent 上出現。
所以我想知道我如何只能更新發出更改檢測的 xcomponent 的視圖並保持其他 xcomponents 的狀態不變。
//list component and his template
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-kameroke-list',
templateUrl: './kameroke-list.component.html',
styleUrls: ['./kameroke-list.component.css']
})
export class KamerokeListComponent implements OnInit {
lyrics=[{"first":"paroles","second":"paroles2","third":"paroles3","id":"test"},
{"first":"lyrics","second":"lyrics2","third":"lyrics3","id":"secondTest"}
];
constructor() { }
ngOnInit() {
}
}
<!--template for list-component-->
<app-kameroke *ngFor="let lyric of lyrics" [first]="lyric.first" [second]="lyric.second" [third]="lyric.third"></app-kameroke>
<!--attribuer un id dynamiquement : [attr.id]="lyric.id"-->
//kamerokeComponent and his template
import { Component, OnInit , Input ,ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-kameroke',
templateUrl: './kameroke.component.html',
styleUrls: ['./kameroke.component.css']
})
export class KamerokeComponent implements OnInit {
@Input() url:string;
@Input() private first:string;
@Input() private second:string;
@Input() private third:string;
masked:boolean=true;
playing:boolean=false;
widget :any;
lyrics:object;
constructor(private ref:ChangeDetectorRef) {
}
ngOnInit() {
//all this event in insertFrame
this.lyrics={
1:"ca marche",
2:"ca cartonne",
3:"c le feu",
4:"testons voir"
};
this.widget=window['SC'].Widget(document.getElementById("test"));
this.widget.bind(window['SC'].Widget.Events.PLAY,()=>{this.playing=true});
this.widget.bind(window['SC'].Widget.Events.PAUSE,()=>{this.playing=false});
this.widget.bind(window['SC'].Widget.Events.FINISH,()=>{this.playing=false});
this.widget.bind(window['SC'].Widget.Events.PLAY_PROGRESS,()=>{
this.widget.getPosition(
(time)=>{
//TODO set les variables first second and third
if(this.lyrics){
let timing=Math.ceil(time/1000);
//console.log(this.lyrics[timing]);
if(this.lyrics[timing]){
console.log(timing);
this.first=this.lyrics[timing];
this.second=this.lyrics[timing];
this.third=this.lyrics[timing];
this.ref.detectChanges();
}
}
}
);
});
}
hide(){
this.masked=false;
}
}
<!--kamerokeComponent template-->
<div class="container">
<div class="row">
<div class="col-sm soundcloudCol">
<iframe (load)="hide()" id="test" allow="autoplay" width="100%" height="100%" scrolling="no" frameborder="no"
src="https://w.soundcloud.com/player/?url=https://soundcloud.com/maahlox/la-vie-cest-la-bastonde&{ ADD YOUR PARAMETERS HERE }">
</iframe>
</div>
</div>
<div class="row lyrics" [hidden]="masked" >
<div class="col-sm">
<br><br>
<p class="first">{{first}}</p>
<p class="second">{{second}}</p>
<p class="second">{{third}}</p>
</div>
</div>
</div>
這是因為在您的ngOnInit
您是通過 id 從硬編碼值"test"
獲取元素。 那么對於您的所有kamerokeComponent
組件,將只有一個小部件元素。 因此,當您更改所有kamerokeComponent
值時,都會更改。 我建議也傳遞元素的id
。
// template for list-component
<app-kameroke *ngFor="let lyric of lyrics" [first]="lyric.first"
[second]="lyric.second" [third]="lyric.third" [id]="lyric.id"></app-kameroke>
//kamerokeComponent
import { Component, OnInit , Input ,ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-kameroke',
templateUrl: './kameroke.component.html',
styleUrls: ['./kameroke.component.css']
})
export class KamerokeComponent {
@Input() url:string;
@Input() private first:string;
@Input() private second:string;
@Input() private third:string;
@Input() private id:string;
masked:boolean=true;
playing:boolean=false;
widget :any;
lyrics:object;
constructor(private ref:ChangeDetectorRef) {
}
ngAfterViewInit() {
//all this event in insertFrame
this.lyrics={
1:"ca marche",
2:"ca cartonne",
3:"c le feu",
4:"testons voir"
};
this.widget=window['SC'].Widget(document.getElementById(this.id));
this.widget.bind(window['SC'].Widget.Events.PLAY,()=>{this.playing=true});
this.widget.bind(window['SC'].Widget.Events.PAUSE,()=>{this.playing=false});
this.widget.bind(window['SC'].Widget.Events.FINISH,()=>{this.playing=false});
this.widget.bind(window['SC'].Widget.Events.PLAY_PROGRESS,()=>{
this.widget.getPosition((time)=>{
//TODO set les variables first second and third
if(this.lyrics){
let timing=Math.ceil(time/1000);
//console.log(this.lyrics[timing]);
if(this.lyrics[timing]){
console.log(timing);
this.first=this.lyrics[timing];
this.second=this.lyrics[timing];
this.third=this.lyrics[timing];
this.ref.detectChanges();
}
}
});
});
}
hide(){
this.masked=false;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.