私は角度成分を持っています。これは実際にはブートストラップパネルです。テンプレートと角度指示出力出力、親が更新されない
export class ExerciseComponent implements OnInit {
@Input() exercise:Exercise;
@Input() index:number;
@Input() first:boolean;
@Input() last:boolean;
@Input() active:boolean;
@Input() selected:boolean;
constructor(private data:ApiDataService, private route:ActivatedRoute) {
}
toggleActive(e){
let show = (e.type=='show');
this.active = show;
}
}
:
<div class="panel-heading">
<div>
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionexercises"
class="accordion-link" href="#collapse{{ exercise.id }}">
{{ exercise.title }} </a>
</h5>
<div class="pull-right">
<i *ngFor="let n of exercise.difficulty | fill" class="fa fa-star"></i>
</div>
</div>
<exercise-preview [hidden]="active" [e]="exercise"></exercise-preview>
</div>
<div id="collapse{{ exercise.id }}" [ngClass]="{'panel-collapse collapse':true, 'in':selected}"
collapseControl (collapseStatus)="toggleActive($event)">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div *ngIf="exercise.image" class="pull-right">
<img src="http://localhost:8000{{ exercise.image.file }}"/>
</div>
<div [innerHtml]="exercise.exText"></div>
</div>
</div>
</div>
</div>
とディレクティブは、ブートストラップ崩壊イベント(jqueryの)を検出し、それらにcollapseStatus($event)
の私のコンポーネントを伝搬するcollapseControl
呼ば:
@Directive({
selector: '[collapseControl]'
})
export class CollapseControlDirective{
@Output() collapseStatus: EventEmitter<any>;
constructor(el: ElementRef) {
this.collapseStatus = new EventEmitter();
Observable
.fromEvent($(el.nativeElement), 'hide.bs.collapse show.bs.collapse')
.subscribe(e=> this.collapseStatus.emit(e));
}
}
すべてが正常に動作し、イベントは親に伝播され、イベントに応じてthis.active
が設定されますが、UIは更新されません([hidden]
属性の<exercise-preview/>
コンポーネント)。
(collapseStatus)="toggleActive($event)"
を(click)="toggleActive($event)"
に変更するだけで問題ありません。これは角度変化の検出で何かをしなければならないが、私が間違っていることを理解することはできない。
「jquery」タグは質問に関係しますか? –
はい、jqueryを使用してブートストラップイベントをキャプチャします – MartinM