你可以这样做，但在我看来你是在浪费时间.过去您切换了多少次设计框架?可能永远不会.

组件的视图比低级组件(如按钮和输入)包含的内容要多得多.布局和响应能力都影响到视图的组成.例如，假设您使用 Material Design 并将 md-button 包装在 my-custom-button 中.随着应用程序的成熟，您无疑会在容器周围添加填充或边距，以保持这些控件，使其外观和感觉更加材料.切换到块上的新设计模式的那一天，你猜怎么着?即使您可以快速更换这些按钮以获得新外观，您仍将编辑所有视图以遵循新外观.也就是说，视图不仅仅是构成它们的低级组件，而且用自己的组件包装每个组件是不值得的.

更有意义的是为每个组件创建单独的模板.

假设您在 Material 中完成了整个应用程序，现在您想切换到 New Hotness.您首先要检查并重命名所有模板:

login.component.html > login.component.material.html

然后创建专门针对新框架的新模板:

login.component.newhotness.html

接下来，创建一个构建过程，在构建时根据一些配置交换 templateUrl.使用此策略，您将能够轻松集成诸如 Ionic 或 NativeScript 其视图不使用 HTML，而是完全不同的基于 XML 的语法.

关键要点:

• 不要用自己的变体包装现有的库组件
• 在单独的文件中创建组件模板
• 当切换到新框架时，为每个组件创建新模板，并使用描述组成它的框架的名称定义旧模板
• 获得报酬！:)

I am developing a UI application using Angular and I can choose one or more of the following CSS frameworks:

1. Bootstrap 4
2. Foundation
3. Angular Material
4. ng-bootstrap or ngx-bootstrap.
5. A pre built template that I can purchase.
6. Many others or new ones...

Is there a best practice to design the Angular application, so that it will be easy to switch to a different CSS framework further down the line ?

One option, I think, is to define a new Feature module, which will import all the controls of a particular CSS Framework, and then, I write a wrapper on that and use it in my application.

For example, I can wrap a md-button with my custom-button in a component template of my module and use it in my application.

Will this approach work or is there a standard design practice that I should follow ?

You could do that, but in my opinion you're wasting your time. How many times in the past have you switched out the design framework? Probably never.

The view of a component is comprised much more than the low level components, like buttons and inputs. There's layout and responsiveness that all play into the composition of the view. For example, lets say you went with material design and wrapped the md-button in my-custom-button. As the application matures you undoubtedly will being adding padding or margin around containers the hold these controls that makes it look and feel more Material. The day comes to switch to the new design pattern on the block, and guess what? Even though you can quickly swap out those buttons for a new look, you're still going to be editing all your views to follow the new look. That said, views are much more than the low level components that make up them, and it's not worth the overhead of wrapping each component with your own.

What makes more sense is to create separate templates for each component.

Lets say you did you entire application in Material, and now you want to switch to New Hotness. You first would go through and rename all your templates:

login.component.html > login.component.material.html

And then create new templates specifically targeting the new framework:

login.component.newhotness.html

Next, create a build process that would swap the templateUrl at build time based on some configuration. Using this strategy, you will be able to easily integrate technologies like Ionic or NativeScript which do not use HTML for their views, but a completely different XML based syntax.

Key takeaways:

• Don't wrap existing library components with your own variation
• Create component templates in a separate file
• When the day comes to switch to a new framework, create new templates for each component and define the older templates with a name that describes the framework that comprises it
• Get paid! :)