如何自定義 angular 13 應用程序

Question

我目前正在將使用 PHP 服務內容和 Angular JS 組合的應用程序升級到 Angular 13 和 Z29B7ZDA 后端。

有兩件事我正在努力尋找解決方案，所以如果有人能指出我正確的方向，我會非常感激

我現有的應用程序使用基於 PHP 的自定義框架，Angular 模板是從 PHP 腳本加載的。 這允許我創建一個 class 來處理 HTML 所以例如我會有一個表格 object 你可以添加引導行和列，然后將對象添加到列。

php 代碼將類似於以下已簡化的代碼

 $form = new form('id','class','submit function')
 $bsrow= $form->add(new bsRow());
 $col= $bsrow->add(new bsCol(2,4,6));
 $col->add(new button('id','class','caption','action');
 echo $form->getHTML;`

這樣做的好處是，如果按鈕 class 發生變化，我只需修改 HTML。 小部件比按鈕更方便，但這意味着所有按鈕都以相同的方式形成。

這樣做的另一個優點是我可以從 XML 文件中讀取標題，客戶可以覆蓋該文件，允許他們更改按鈕文本、styles 等。它還允許我在服務器端嵌入邏輯以更改應用程序的行為方式php 基於配置文件。

所以問題 1：現在 Angular 都是 HTML 並且每個組件都有自由手 HTML 我似乎已經失去了這種能力。 Angular 13 中有什么東西可以用來創建這些模板嗎？ 這就是指令的含義嗎？ 似乎它們在 IO 和 JS 中的工作方式不同。 該指令需要能夠設置為可以接受子組件的單個元素（例如按鈕）或容器（例如表單或 div）。

問題 2：由於現有的自定義是在服務器上完成的，因此我可以使用某些東西從某個文件中加載一組客戶可配置的設置，而這些設置不會在每次有新版本時都被刪除。 例如，更改路由的應用程序設置或一組自定義定義，指定元素 ID 和要使用的自定義文本。

問題 3：您如何允許客戶設置自己的樣式覆蓋？

希望這是有道理的。

Answer 1

Php 不適合渲染單頁應用程序。 當 SPA 不流行時，后端用於處理請求並返回相應的 HTML。

但是，對於像 Angular 這樣的 SPA 和框架，一旦我們加載 index.html 文件，現在一切都發生在瀏覽器上。 我們在瀏覽器中渲染、導航和管理應用程序 state。 為了與后端通信，我們使用 SOAP/REST API 發出 HTTP 請求，然后相應地操作 DOM。

回答你的幾個問題：

Angular 13 中有什么東西可以用來創建這些模板嗎？

• 使用 Angular，您可以創建可在整個應用程序中重復使用的components 。 你可以閱讀更多關於Content Projection 、 View Encapsulation 、 TemplateRefs引用、 ViewChild等概念的信息。 要創建可重用和可擴展的組件，您可以遵循原子設計模式。https://cfpb.github.io/consumerfinance.gov/atomic-structure/

此外，您可以利用 CSS 預處理器，如SASS ，它具有mixins和placeholders等功能，用於創建可重用的樣式。

有什么東西我可以用來從文件中加載一組客戶可配置的設置，每次有新版本時都不會被吹噓

• 您應該在后端保存所有客戶可配置的設置。 每當 angular 應用程序加載時，您可以在 Angular 應用程序引導並在瀏覽器上呈現之前在APP_INITIALIZER中獲取這些設置。

您如何允許客戶設置自己的樣式覆蓋？

• 不知道您之前的設置是如何工作的，但是使用Angular ，您需要為此設置一個框架/架構。 您將獲取客戶首選的 styles 作為 JSON object 並使用它來動態更新您的組件的 ZBC4150D023D32551236DB76。 以下是動態更改 styles 的常用方法https://medium.com/swlh/6-ways-to-dynamically-style-angular-components-b43e037852fa