走向绿色”

如前所述，How I manage my dev bookmarks to save time and nerves我使用大量的Codever来管理我的书签和代码片段，因此该网站总是打开一个浏览器选项卡。最近，我还在该项目上开发了很多new features。在浏览器中进行了许多测试，直到现在，除非我在浏览器的导航栏中查看URL，否则还没有快速区分生产和开发版本的方法。

因为我一直在寻找使我生活更轻松的事物，所以我想起了一个旧技巧，可以帮助我更轻松地区分这两个版本：

• 更改颜色 导航栏
• 更改 favicon

现在两者都是 绿色 对于开发环境

在下面的图片中，请参阅下面的图片，在不查看URL

代码更改

Favicon

代码更改很小。首先更改favicon href属性未生产

export class AppComponent implements OnInit {
    favIcon: HTMLLinkElement = document.querySelector('#favicon');
    readonly environment = environment;

    ngOnInit(): void {
        if (environment.production === false) {
            this.favIcon.href = 'assets/logo/logo-green.svg';
        }
    }
}

请参阅Configure and use environment specific values in Angular and html template查看如何与角环境一起工作

导航栏颜色

然后将导航的条颜色设置为 绿色 也基于
不是生产条件

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow"
     [ngClass]="{'navbar-dev' : environment.production === false}" >

navbar-dev CSS类

.navbar-dev {
  background-color: darkgreen !important;
}

请参阅Conditional css class in angular html element 有关如何在角度动态上更改类的

中的类别

多个开发/测试环境

当然，如果您拥有更多的开发/测试环境 集成或 preprod ，请考虑区分它们，您的开发人员将感谢您。

您不会相信这些小调整如何改善您的发展体验ð