一个项目，多个客户.角度2 [英] One project, multiple clients. Angular 2

问题描述

好吧，我有一个问题，似乎找不到答案.

Oky so I have a question which I seem not able to find the answer to.

假设我有一个项目x，该项目将由多个客户端使用，每个客户端都具有可以共享或不共享的功能，以及自己的自定义样式表和html布局.

Let say I have a project x, which will be used by multiple clients, each with there own functionality that either might be shared or not as well as there own custom style sheets and html layouts.

所以按照正常的角度2单击模式，我想知道这是否可能.

So following the normal angular 2 click pattern I am wondering if this would be possible.

示例

foo
--foo.component.css
--foo.component.html
--foo.component.spec.ts
--foo.component.ts
--client-x
----foo.component.css
----foo.component.html
--client-y
----foo.component.css
----foo.component.html
----foo.comoonent.ts

如您所见，第一级将是基本实现.然后，客户端x使用相同的功能，但仅覆盖样式和html，而客户端y覆盖所有功能以及样式和css.

As you can see the first level would be the base implementation. Then client x uses the same functionality but just overrides the styles and html, while client y overrides all functionality as well as the styles and css.

有人知道这是否可行以及这是否是一个好主意.这样做的原因是，如果有多个项目包含基本相同的代码，那么如果在代码库中发现错误或要添加功能，则我们必须不断更新所有项目.我知道在角度1中这是可能的，因为我已经看到了这样的项目结构.我相信他们会花大量的精力进行后期构建，但是我不确定这是否足够，也不知道该如何处理.

Does anybody know if this is possible as well as whether this is a good idea. The reason for this is, having multiple projects that contain basically the same code, we constantly have to update all projects if a bug is found in the code base or we are adding a feature. I know this was possible in angular 1 as I have seen a project structure like this. I believe they used a gulp job to do a post build build, but I am not sure if this would suffice and also don't know how to approach it.

您的投入将不胜感激.

Your inputs would be appreciated.

推荐答案

我们遇到了同样的问题，并且计划使用以下方法，该方法适用于小型概念验证项目

We have the same problem and we're planning to use the following approach, which worked for small proof of concept project

• 具有包含所有通用组件和模板的Core模块.
• 每个客户端应用均作为子模块实现
• 对于每个子模块，监视脚本会将核心组件复制到该子模块的基本"文件夹中.默认情况下，子模块声明并使用基本文件夹中的组件.

组件继承

要覆盖子组件的逻辑，请声明一个继承自Core组件的新组件.修改子模块以声明该继承的组件，而不是基本文件夹中的那个

To override a child component's logic, declare a new component that inherits from the Core component. Modify the child module to declare that inherited component, rather than the one in the base folder

模板继承

我们使用 nunjucks 表示组件模板已继承了块.

We use nunjucks to that component templates have inherited blocks.

因此，对于每个子组件可以覆盖其模板的组件，我们都有一个template.html.nunj，它会被nunjucks编译为template.html.

So for each component that can have its template overriden by child components, we have a template.html.nunj which is compiled to template.html by nunjucks.

这是通过监视脚本完成的.监视脚本还检查子模块中每个组件是否存在html文件.如果存在，则链接的templateUrl在基本文件夹的相应组件中更改为指向该文件.这样我们就可以覆盖模板，而无需重新声明component.ts文件

This is done via a watch script. The watch script also checks if there is a html file for each component in the child module. If there is one, the templateUrl linked is changed in the corresponding component in the base folder to point to that file. This allows us to override just the template, without having to redeclare the component.ts file

样式继承

使用sass，在单独的文件中声明变量，并使用相对路径引用它们.如果需要，您可以修改继承的组件sass文件以导入核心组件的sass，然后覆盖下面的样式

With sass, declare variables in separate files and reference them with relative paths. If needed, you can modify an inherited component sass file to import the core components's sass, then override the style below

这篇关于一个项目，多个客户.角度2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！