需要帮助弄清楚如何将图像包含在另一个应用程序引用的可重用组件中。
例如,我有一个 Angular 应用程序,我们称之为 UI-Common,它包含通用组件;另一个 Angular 应用程序,我们称之为 Command-Center,它将使用这些通用组件。
在 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>
[我的控制.组件.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 中,它将 UI-Common 添加为 package.json 中的依赖项。将创建一个 Command-Center 组件并使用 my-control.component,如下所示:
[应用程序模块.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>
[主页.组件.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”。我不想在命令中心的资产文件夹中保存图像的副本。如何正确处理公共组件中的图像?