góc 2: Sự kiện chụp từ ng-content

Question

góc cấu trúc ứng dụng:

<app><div content><a href="#" (click)="show()">click me</a></div></app> 

Nội dung thành phần mẫu:

<ng-content></ng-content> 

thành phần nội dung có phương pháp nào show(), nhưng khi tôi nhấp vào liên kết này tôi nhận được:

Error: EXCEPTION: Error during evaluation of "click" 
ORIGINAL EXCEPTION: TypeError: l_context.show is not a function 
ORIGINAL STACKTRACE: 
anonymous/ChangeDetector_AppComponent_0.prototype.handleEventInternal@http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js line 10897 > Function:207:13 
AbstractChangeDetector</AbstractChangeDetector.prototype.handleEvent@http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8788:17 

Về cơ bản tôi muốn sử dụng lại đánh dấu trang và đặt người nghe trên dom hiện có, tôi không muốn tạo các mẫu hoặc thành phần bổ sung. Có lẽ tôi đang thiếu một cái gì đó hiển nhiên.

Planker

Answer 1

show() sẽ giải quyết với thành phần cha mẹ của <app> và vì nó trông giống như <app> là thành phần gốc, không có cha mẹ.

Tôi đoán lỗi ở đây là Angular thậm chí cố gắng liên kết với sự kiện nhấp chuột. Tôi có ấn tượng rằng <ng-content> không được hỗ trợ chút nào trên thành phần gốc.

Xem thêm https://github.com/angular/angular/issues/1858 (https://github.com/angular/angular/issues/6046)

Cập nhật

<h1>Angular</h1> 
<div content #contentRef> 
    <ui> 
     <li><a href="#" (click)="contentRef.show($event)" class="link" button>link 1</a></li> 
     <li><a href="#" (click)="contentRef.show($event)" class="link" button>link 2</a></li> 
     <li><a href="#" (click)="contentRef.show($event)" class="link" button>link 3</a></li> 
    </ui> 
</div> 

bindings được giải quyết trong phần nơi họ đang công bố. Trong ví dụ trên, tôi đã chuyển hướng rõ ràng tham chiếu đến ContentComponent bằng cách tạo biến mẫu #contentRef trên phần tử đích và tham chiếu nó khi xác định trình xử lý nhấp chuột (click)="contentRef.show($event)".

Mặc dù nội dung được "chuyển" tới một thành phần khác bằng cách sử dụng <ng-content> không có nghĩa là thay đổi phạm vi. <ng-content> chỉ là một phép chiếu - các phần tử được hiển thị ở một vị trí khác là tất cả, chúng vẫn được "sở hữu" bởi thành phần mà chúng được thêm vào ban đầu.