1
我對Angular 2相當陌生，並且正在構建一個應用程序，該應用程序在父主機組件中生成相同子組件的多個實例。單擊其中一個組件將其置於編輯模式（顯示錶單輸入），並單擊活動編輯組件外部的應將編輯組件替換爲默認只讀版本。處理點擊並點擊Angular 2中的外側事件執行優先級的最佳方法是什麼？
@Component({
selector: 'my-app',
template: `
<div *ngFor="let line of lines">
<ng-container *ngIf="!line.edit">
<read-only
[lineData]="line"
></read-only>
</ng-container>
<ng-container *ngIf="line.edit">
<edit
[lineData]="line"
></edit>
</ng-container>
</div>
`,
})
export class App {
name:string;
lines:any[];
constructor() {
this.name = 'Angular2';
this.lines = [{name:'apple'},{name:'pear'},{name'banana'}];
}
}
一個項目是由（點擊）處理置於編輯模式的只讀組件上，並通過連接到在自定義指令定義的（clickOutside）事件的處理程序同樣切換出的編輯模式。
只讀組件
@Component({
selector: 'read-only',
template: `
<div
(click)="setEditable()"
>
{{lineData.name}}
</div>
`,
inputs['lineData']
})
export class ReadOnly {
lineData:any;
constructor(){
}
setEditable(){
this.lineData.edit=true;
}
}
編輯組件
@Component({
selector: 'edit',
template: `
<div style="
background-color:#cccc00;
border-width:medium;
border-color:#6677ff;
border-style:solid"
(clickOutside)="releaseEdit()"
>
{{lineData.name}}
`,
inputs['lineData']
})
export class Edit {
lineData:any;
constructor(){
}
releaseEdit(){
console.log('Releasing edit mode for '+this.lineData.name);
delete this.lineData.edit;
}
}
的問題是，切換到編輯模式的單擊事件也拿起由clickOutside處理程序。 clickOutside處理程序在內部由單擊事件觸發，並測試編輯組件的nativeElement是否包含點擊目標 - 如果不是，則會發出clickOutside事件。
ClickOutside指令
@Directive({
selector: '[clickOutside]'
})
export class ClickOutsideDirective {
ready: boolean;
constructor(private _elementRef: ElementRef, private renderer: Renderer) {
}
@Output()
public clickOutside = new EventEmitter<MouseEvent>();
@HostListener('document:click', ['$event', '$event.target'])
public onClick(event: MouseEvent, targetElement: HTMLElement): void {
if (!targetElement) {
return;
}
const clickedInside = this._elementRef.nativeElement.contains(targetElement);
if (!clickedInside) {
this.clickOutside.emit(event);
}
}
}
我已經試過（clickOutside）事件有關的動態綁定到編輯組件內ngAfterContentInit（）和ngAfterContentChecked（）的生命週期掛鉤，並使用渲染聽（）as detailed here但沒有成功。我注意到本地事件可以用這種方式綁定，但我無法綁定到自定義指令的輸出。
我在此附加了一個Plunk來說明問題。使用控制檯向上單擊元素將演示clickOutside事件如何觸發（最後一次）脫離創建編輯組件的同一點擊事件 - 立即將組件恢復爲只讀模式。
什麼是最清潔的方式來處理這種情況？理想情況下，我可以動態綁定clickOutside事件，但尚未找到成功的方法。