2017-01-13 28 views
12

Sử dụng hợp cụ thể: Một khách hàng muốn xây dựng một thư viện mà bao gồm 2 thành phần góc nhưng cho thấy giao diện trừu tượng, công nghệ-agnostic cho người dùng cuối (phát triển) của thư viện đó, để những người dùng có thể sử dụng JavaScript đơn giản và không nhận thức được nội bộ của thư viện.Cách tiêm các thành phần Angular 2 tại các nút DOM khác nhau trên một trang JavaScript đơn giản?

Khó khăn xuất phát từ những điều sau:

  1. Có một trang, trong đó sử dụng đồng bằng JavaScript. Trang này được phát triển bởi bên thứ ba.
  2. Bên thứ ba có thể chèn thành phần Angular 2 đã cho tại các địa điểm cụ thể (nút DOM) trên trang.
  3. Giả sử thành phần là <mg-input> và nó sẽ được hiển thị trong tiêu đề của trang JavaScript đơn giản, nhưng không chỉ ở đó - cũng trong biểu mẫu trên trang. Hai vị trí khác nhau, hai nút DOM khác nhau có giữa chúng thuần html.

Câu hỏi: Làm thế nào chúng ta bootstrap phần tại nút DOM cụ thể và làm thế nào để chúng ta vượt qua cấu hình (không nguyên thủy nhưng một đối tượng phức tạp) để những thành phần?

Trong thế giới React này được thực hiện đơn giản bằng cách chạy ReactDom.render(domEl, <CustomInput nonPrimitiveConfig={config}/>) và tùy thuộc vào những gì domEl и config là, thành phần sẽ được trả lại ở những nơi khác nhau với cấu hình khác nhau.

Cách thực hiện việc này trong Góc 2?

+2

Câu hỏi đã xuất hiện [nhiều] (http://stackoverflow.com/q/41783547/1153681) [lần] (http://stackoverflow.com/q/41804873/1153681) trên SO. Thật thú vị, theo một từ ngữ rất khác nhau mỗi lần. Nó tóm tắt để muốn sử dụng các "widget" độc lập trong một môi trường không phải là góc (có thể là một trang HTML tĩnh, một trang được tạo trong JavaScript đơn giản ...). Câu trả lời được chấp nhận dường như là điều này là không thể (trừ khi bạn sẵn sàng chạy một ứng dụng Angular đầy đủ cho mỗi widget). Góc như nó được thiết kế để kiểm soát toàn bộ trang hoặc một phần lớn của nó, nhưng không phải là một loạt các bit trải ra. – AngularChef

+0

@AngularFrance bởi "ứng dụng góc đầy đủ", bạn có nghĩa là 'ngModule' hay cái gì khác không? – antitoxic

+1

Bởi "ứng dụng góc đầy đủ", tôi có nghĩa là điều bạn khởi động với 'platformBrowserDynamic(). BootstrapModule()'. (Một ứng dụng là một tập hợp các NgModules.) – AngularChef

Trả lời

0

Có thể hỏi tại sao họ muốn thành phần Angular 2 đặc biệt?

Chúng tôi đã mã hóa một "tiện ích" độc lập bao gồm API javascript, Giao diện người dùng và kiểu dáng. Nhà phát triển ứng dụng gọi hàm javascript để kích hoạt nó.

Mọi thứ mà nhu cầu của dev được đóng gói với các phụ thuộc thư viện bằng không.

Phương án thay thế của bạn là phát triển các thành phần trừ đi giao diện người dùng (ví dụ: đóng cửa/SEF). Ứng dụng khách sau đó có thể sử dụng bất kỳ công nghệ nào họ muốn cho giao diện người dùng.

+0

Đây không phải là một lựa chọn. Nó đã được thảo luận với khách hàng. Nó cũng không trả lời câu hỏi. – antitoxic

0

Điều này là không thể với Angular cho đến khi Custom Elements được thêm (đã được công bố Q4 2017 nhưng github repo đã được lưu trữ vì lý do nào đó, vì vậy tôi không chắc liệu CE sẽ tiếp tục được phát triển).

Điều bạn có thể làm là sử dụng Stencil để tạo các thành phần của mình. Chúng rất giống nhau (sử dụng kiểu chữ) để bạn xây dựng các thành phần trong Angular - các thành phần như vậy có thể được tải bởi Angular (với một số cấu hình cơ bản) hoặc bất kỳ khung công tác nào khác hoặc thậm chí chỉ trong một thiết lập HTML/JS thuần túy.

Ví dụ: here là thành phần cơ bản của Stencil.

Sự khác biệt chính về góc là không có tệp HTML mẫu riêng biệt, nhưng thay vào đó, nó sử dụng JSX để hiển thị mẫu.

Bên thứ ba có thể chèn các thành phần này tại một địa điểm cụ thể.

Nhà phát triển của bạn có thể thêm các thành phần vào dự án Góc cho bất kỳ mục đích nào bạn cần chúng ở trong Góc.

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