![可重用组件中]( "可重用组件中")
本文介绍了Angular CLI - 如何在可重用组件中引用图像路径的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
需要帮助弄清楚如何在另一个应用中引用的可重用组件中包含图像.
例如，我有一个 Angular 应用程序，我们称之为 UI-Common，它包含通用组件和另一个 Angular 应用程序，我们称之为 Command-Center，它将使用这些通用组件.
在 UI-Common 中，有一个名为 my-control.component 的组件，其定义如下:
[my-control.component.html]
<img src="assets/images/myImage.png"/><div class"username" *ngIf="user"><p><strong>{{user.companyName}}</strong></p><p>{{user.firstName + ' ' + user.lastName}}</p>
[my-control.component.ts]
import { Component, Input } from '@angular/core';从'../../models/user'导入{用户}；@成分({选择器:'我的控制'，templateUrl: './my-control.component.html',styleUrls: ['./my-control.component.scss'],})导出类 MyControlComponent {@Input() 用户:用户；构造函数(){}}
在 Command-Center 中，它在 package.json 中添加了 UI-Common 作为依赖项.一个 Command-Center 组件被创建并使用 my-control.component 如下:
[app.module.ts]
...从 './home/home.component' 导入 { HomeComponent };从 'ui-common' 导入 { MyControlComponent };@NgModule({声明: [...,主页组件，我的控件组件，...],...})导出类 AppModule { }[home.component.html]
<div class="homeContent">等等等等等等...
[home.component.ts]
import { Component } from '@angular/core';从'ui-common'导入{用户}；@成分({选择器:'app-home'，templateUrl: './home.component.html',styleUrls: ['./home.component.scss']})导出类 HomeComponent {用户:用户；构造函数(){this.user = new User();this.user.companyName = 'iHeartMedia';this.user.firstName = '约翰';this.user.lastName = '史密斯';}}
问题是从 Command-Center 运行时 my-control 上的图像根本无法加载.这似乎是因为 Command-Center 中不存在正在使用的图像路径assets/images/myImage.png".我不想在命令中心的资产文件夹中保存图像的副本.如何正确处理公共组件中的图像?
解决方案
发现这个 Angular CLI 功能请求:https://github.com/angular/angular-cli/issues/3555
Angular 应用程序可以配置为将文件从相对文件路径复制到应用程序分发目录中的文件夹.这使我们可以从 node_modules 文件夹中访问图像，而无需手动将图像复制到本地资产文件夹中.
更新到最新版本的 Angular CLI (1.2.1) 后，我修改了我的 angular-cli.json 文件如下:
{...应用": [{"root": "src","outDir": "dist",资产":[资产"，"favicon.ico","版本.txt",{"glob": "**/*","input": "../node_modules/ui-common/src/assets/images",输出":./assets/images"}],...}现在，Command-Center 应用可以访问 UI-Common 应用中的所有图像.
关于配置的更多细节在这里:https://github.com/angular/angular-cli/wiki/stories-asset-configuration
Need help figuring out how to include images in a reusable component that is referenced in another app.
For example, I have an Angular App, let's call it UI-Common, that contains common components and another Angular App, let's call it Command-Center, that will use those common components.
In UI-Common, there is a component called my-control.component that is defined as follows:
[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() {
}
}
In Command-Center, it adds UI-Common as a dependency in the package.json. A Command-Center component is created and uses my-control.component as follows:
[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';
}
}
The problem is the image on my-control when running from Command-Center does not load at all. This appears to be because the image path being used "assets/images/myImage.png" does not exist in Command-Center. I don't want to save a copy of the image in the Command-Center's assets folder. How do I properly handle images in the common component?
解决方案
Found this Angular CLI feature request: https://github.com/angular/angular-cli/issues/3555
The Angular app can be configured to copy files from a relative file path to a folder within the app's distribution directory. This allows us to get access to images from within the node_modules folder without having to manually copy the images into the local assets folder.
After updating to the latest version of Angular CLI (1.2.1) I modified my angular-cli.json file as follows:
{
...
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico",
"version.txt",
{
"glob": "**/*",
"input": "../node_modules/ui-common/src/assets/images",
"output": "./assets/images"
}
],
...
}
Now all images that are in the UI-Common app are accessible to the Command-Center app.
More details about the configuration here: https://github.com/angular/angular-cli/wiki/stories-asset-configuration
这篇关于Angular CLI - 如何在可重用组件中引用图像路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！