Angular CLI - 如何在可重用组件中引用图像路径

Question

需要帮助解决如何在被引用于另一个应用程序的可重用组件中包含图片的问题。

例如，我有一个名为UI-Common的Angular应用程序，其中包含常见组件，还有一个名为Command-Center的Angular应用程序，它将使用这些常见组件。

在UI-Common中，有一个名为my-control.component的组件，其定义如下：

[my-control.component.html]

<div>
<img src="assets/images/myImage.png"/>
<div class"username" *ngIf="user">
    <p><strong>{{user.companyName}}</strong></p>
    <p>{{user.firstName + ' ' + user.lastName}}</p>
</div>

[my-control.component.ts]

import { Component, Input } from '@angular/core';

import { User } from '../../models/user';

@Component({
    selector: 'my-control',
    templateUrl: './my-control.component.html',
    styleUrls: ['./my-control.component.scss'],
})
export class MyControlComponent {
    @Input() user: User;

    constructor() {

    }
}

在Command-Center中，它会在package.json文件中添加UI-Common作为依赖项。创建了一个Command-Center组件，并使用my-control.component如下：

[app.module.ts]

...
import { HomeComponent } from './home/home.component';
import { MyControlComponent } from 'ui-common';

@NgModule({
   declarations: [
      ...,
      HomeComponent,
      MyControlComponent,
      ...
   ],
   ...
})
export class AppModule { }

[home.component.html]

<my-control [user]=user></my-control>
<div class="homeContent">
    blah blah blah...
</div>

[home.component.ts]

import { Component } from '@angular/core';

import { User } from 'ui-common';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
  user: User;

  constructor() {
    this.user = new User();
    this.user.companyName = 'iHeartMedia';
    this.user.firstName = 'John';
    this.user.lastName = 'Smith';
  }
}

问题是当从Command-Center运行时，my-control上的图像根本不加载。这似乎是因为使用的图像路径“assets/images/myImage.png”在Command-Center中不存在。我不想在Command-Center的资产文件夹中保存图像的副本。如何正确处理通用组件中的图像？

- ruhler

Answer 1

发现了这个Angular CLI功能请求：https://github.com/angular/angular-cli/issues/3555

可以配置Angular应用程序，将相对文件路径中的文件复制到应用程序分发目录中的文件夹中。这使我们可以访问node_modules文件夹中的图像，而无需手动将图像复制到本地资产文件夹中。

在更新到最新版本的Angular CLI（1.2.1）后，我修改了我的angular-cli.json文件如下：

{
...
"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "version.txt",
        {
          "glob": "**/*",
          "input": "../node_modules/ui-common/src/assets/images",
          "output": "./assets/images"
        }
      ],
...
}

现在，UI-Common应用中的所有图像都可以被Command-Center应用访问。

有关配置的更多详细信息，请参见此处：https://github.com/angular/angular-cli/wiki/stories-asset-configuration

- ruhler

---

如果我理解正确，有两个.angular-cli.josn文件。一个是“UI-Common”应用程序的，另一个是“Command Center”应用程序的。您上面展示的更改是在“Command Center”应用程序的.angular-cli.json文件中完成的，而不是“UI-common”应用程序的。我的论点是，如果“UI-Common”作为组件被许多应用程序（您无法控制）使用，那么使用“UI-common”的每个应用程序都必须编辑自己的.angular-cli.json文件。这好吗？ - TheMonkWhoSoldHisCode

Answer 2

import {APP_BASE_HREF} from '@angular/common';

@NgModule({
  declarations: [ ... ],
  imports: [ ... ], 
  providers: [{provide: APP_BASE_HREF, useValue : '/' }]
]); 

我认为你需要这样做，才能在你想要使用图像的模块中实现它。

- diopside