如何自定义 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