2016-09-05 13 views
7

Có cách nào để tải mẫu động trong angular2 không? Trong angular1, tôi đã sử dụng ng-include để tải mẫu html khác nhau trong khung nhìn điều khiển chính. Tôi biết rằng angular2 chỉ có thể lấy 1 templateUrl và được googling ng-include trong angular2 và không thể tìm thấy bất kỳ tham chiếu nào.Mẫu động Angular2 hoặc ng-include

+1

Có ['ngTemplateOutlet'] (https://angular.io/docs/ts/latest/api/common/index/NgTemplateOutlet-directive.html) nhưng điều đó không chính xác như những gì bạn đang tìm kiếm . Một cách khác là biên dịch các thành phần trong thời gian chạy. –

+0

bạn có thể thử giải pháp này: http://stackoverflow.com/questions/33749994/dynamic-template-in-templaturl-in-angular2?answertab=votes#tab-top –

Trả lời

4

Không chắc chắn về mẫu động, nhưng bạn có thể chèn một thành phần động (trong đó ofcourse sẽ có một mẫu khác nhau).

Một ví dụ đơn giản, nhưng bị phản đối có thể được tìm thấy ở đây: Angular2: Insert a dynamic component as child of a container in the DOM

Một cập nhật ví dụ, nhưng phức tạp hơn có thể được tìm thấy ở đây: How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

1

Tại sao bạn cần ng-bao gồm khi bạn có thể làm html dưới dạng thành phần mới tùy chỉnh và sử dụng nó ở bất cứ nơi nào bạn cần, nhờ thẻ chọn.

Ví dụ:

@Component({ 
     selector: 'app-my-component', 
     templateUrl: './my-component.component.html' 
    }) 

Vì vậy, ở đây, các tập tin my-component.component.html có thể có đánh dấu bạn muốn bao gồm hoặc hiển thị những nơi khác. và giá trị thẻ chọn <app-my-component></app-my-component> có thể được sử dụng trong các tệp html đánh dấu ứng dụng của bạn (bạn có thể coi nó như các thẻ html hàng ngày của mình - nhưng được tùy biến cao trong tự nhiên và được giải thích bằng khung góc đầu tiên được gọi là thẻ tùy chỉnh nhưng được xây dựng bằng góc).

+0

điều này chúng tôi đã thử nhưng lỗi giao diện điều khiển đến rằng thẻ không kết thúc đúng cách. bởi vì chúng tôi thêm thẻ bắt đầu html vào header.html và thẻ kết thúc bằng footer.html –

+0

, sau đó trong index.html của bạn, bạn có một cái gì đó như <.... chân trang của riêng bạn>

+0

Ý tưởng này là tốt. Tôi đã thử bằng cách tạo hai thành phần riêng biệt cho đầu trang và chân trang và xóa thẻ khỏi chân trang HTML. nó hoạt động tốt nhưng nó có thể không hoạt động đối với trình duyệt IE. –

Các vấn đề liên quan