Góc 2.0 - Sự khác biệt giữa @ViewQuery và @Query

Question

Từ những gì tôi đã đọc trong Angular 2 documentation của QueryList, @Query nên cho phép khả năng đưa tham chiếu đến thành phần con vào một thành phần nhất định.

Sử dụng @QueryView tôi đã quản lý để có được một tham chiếu đến một phần tử DOM con như vậy:

// Parent component's template 
<my-component #test> 

// Parent component 
class ParentComponent { 
    constructor(@Query('test') child: QueryList<any>) {...} 
} 

tôi mong đợi rằng @Query có thể trở lại các thành phần phù hợp chứ không phải là phần tử DOM, nhưng tôi đã không được quản lý để làm cho nó hoạt động, cũng như tôi không tìm thấy bất kỳ tài liệu nào cho biết.

Sự khác biệt giữa hai trang trí này là gì?

Answer 1

Trước tiên, bạn phải hiểu DOM ánh sáng và DOM bóng là gì. Những thuật ngữ này đến từ các thành phần web. Vì vậy, here is the link. Nói chung:

• nhẹ DOM - là DOM người dùng cuối của cung cấp linh kiện của bạn vào thành phần của bạn.
• DOM bóng - là DOM nội bộ thành phần của bạn được định nghĩa bởi bạn (như là một tác giả của các thành phần) và ẩn từ người dùng cuối.

Tôi nghĩ rằng, nhìn vào ví dụ tiếp theo bạn có thể dễ dàng hiểu được những gì là những gì (here is the plunker):

@Component({ 
    selector: 'some-component' 
}) 
@View({ 
    template: ` 
    <h1>I am Shadow DOM!</h1> 
    <h2>Nice to meet you :)</h2> 
    <ng-content></ng-content> 
    `; 
}) 
class SomeComponent { /* ... */ } 

@Component({ 
    selector: 'another-component' 
}) 
@View({ 
    directives: [SomeComponent], 
    template: ` 
    <some-component> 
     <h1>Hi! I am Light DOM!</h1> 
     <h2>So happy to see you!</h2> 
    </some-component> 
    ` 
}) 
class AnotherComponent { /* ... */ } 

Vì vậy, câu trả lời cho bạn câu hỏi là khá đơn giản:

Các sự khác biệt giữa Query và ViewQuery là Query đang tìm kiếm các phần tử trong Light DOM trong khi ViewQuery đang tìm kiếm chúng trong Shadow DOM.

PS Ví dụ thể hiện phép chiếu nội dung đơn giản. Nhưng <ng-content> có thể làm nhiều thứ phức tạp hơn. Xem this issue.