Winkel-CLI - Wie Referenz-Bild-Pfade in wiederverwendbare Komponenten

Hilfe benötigen, herauszufinden, wie man Bilder in eine wiederverwendbare Komponente, auf die verwiesen wird, in einem anderen app.

Ich habe zum Beispiel eine Eckige App, nennen wir es mal-UI-Common enthält Allgemeine Komponenten und eine Eckige App, nennen wir Sie " Kommando-zentrale, die diese gemeinsamen Komponenten.

Im UI-Common, gibt es eine Komponente namens my-Kontrolle.Komponente, die wie folgt definiert ist:

[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>

[meine-control.Komponente.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 der Kommando-zentrale fügt es die UI-Common als Abhängigkeit im Paket.json. Ein Command-Center-Komponente wird erstellt und verwendet my-Kontrolle.Komponente wie folgt:

[app.- Modul.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.Komponente.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';
  }
}

Das problem ist, das Bild auf meine-Kontrolle bei der Ausführung von Command-Center nicht geladen. Dies scheint zu sein, dass der Pfad für das Bild verwendeten "assets/Bilder/meinbild.png" existiert nicht in der Kommando-zentrale. Ich möchte nicht speichern Sie eine Kopie des Bildes in das Command-Center der Ordner "assets". Wie kann ich richtig mit Dateien umgehen, die in der common-Komponente?

InformationsquelleAutor ruhler | 2017-07-14