Question

当我的angular 6项目处于生产模式时，资产文件夹将从src中移出。它是在webpack配置中设置的。

所以我是Angular的新手。我想要一种干净的方法来基于NODE_ENV引用资产的路径。我想这样做：

// Utility class
class Utilities {
  public static getAssetsPath(env) {
    return env == 'dev' ? 'src/assets' : '../assets';
  }
  private constructor() {}
}

// Component class
import {Utils} from 'shared/utilities/utils';

class MyComponent {

const ENVIRONMENT = process.env.NODE_ENV;
constructor(
private route: ActivatedRoute,
private router: Router
  ) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        const eventUrl = /(?<=\/).+/.exec(event.urlAfterRedirects);
        const currentRoute = (eventUrl || []).join('');
            this.myIcon =
              Utils.getAssetPath(ENVIRONMENT) + '/icons/myIcon.png';
        }
    });
  }
    }

但是我猜测还有一种更多的Angular方式可以做到这一点，因此每个组件都可以访问它而不必导入Utilities类。例如，像提供商。我的解决方案不是Angular方法吗？感谢您的专业提示。

Answer 1

在您的组件中，您将这样的图像添加到哪里

 <img src="../assets/icons/myIcon.png"/>

使用以下命令部署应用程序时应该没有问题

 ng build

Answer 2

一种解决方法是创建一个代表图像的组件，然后将图像路径传递给该组件。像这样使用html中的组件选择器：

<my-image-component [path]="'/icons/myIcon.png'"></my-image-component>

这样，只需将实用程序类注入图像组件中即可。

在角度6中包含实用程序类的最佳方法

2 个答案: