La guía de estilo de johnpapa Angular 2 sugiere un enfoque de carpeta por función . Entiendo la idea, puedes hacer pequeños componentes angulares autónomos que se pueden reutilizar.
Entonces, hice un componente que quería reutilizar en otro proyecto y lo puse en su propia carpeta. También agregué una imagen que quería que este componente mostrara en la misma carpeta, por lo que es independiente.
<img class="logo" src="logo.png"/> Pero esto intenta cargar la imagen desde la raíz localhost:3000/logo.png .
Supongo que esto significa que tengo que usar la ruta exacta a la imagen, pero ¿esto no socava la idea de componentes que otras personas pueden reutilizar en otro proyecto?
¿Sugerencias sobre esto?
Edite para aclarar que estoy usando la estructura de carpetas del inicio rápido de Angular 2, lo que significa que mi carpeta raíz es:
app/ node_modules/ index.html package.json tsconfig.jsonEntonces, incluso si uso la ruta header/logo.png, no funciona. Tengo que hacer app/header/logo.png. Esta es efectivamente una ruta absoluta y, de hecho, funciona igual de bien si agrego una barra diagonal inicial: "/app/header/logo.png". Cualquier cosa menos que la ruta completa rompe el enlace. Lo que significa que si alguien quisiera reutilizar esto, tendría que tener exactamente la misma estructura de carpetas.
Supongo que así es como funciona, solo estoy aprendiendo Angular 2, pero en mi mente debería poder cargar activos desde una carpeta de componentes tal como puedo hacerlo con la plantilla o css
Estoy usando webpack y he podido superar este problema al require la imagen en el componente como una variable y usar esto en mi plantilla.
Esto se debe a que, durante la fase de agrupación, el paquete web cargará el recurso y almacenará la URL correcta y la llamada a require en tiempo de ejecución obtendrá esta URL correcta para pasar a la plantilla.
Ejemplo
Usando la siguiente estructura de directorio
app/ header/ header.component.ts header.component.html assets/ logo.png ...encabezado.componente.ts
... @Component({ selector: 'header', templateUrl: './header.component.html', // Auto required by webpack }) export class HeaderComponent { private LOGO = require("./assets/logo.png"); constructor() {}; }encabezado.componente.html
<div> <img [src]="LOGO" /> </div>Es cierto que esto vincula el componente y la plantilla, pero el requisito debe estar en el componente para que el paquete web pueda analizarlo y cargarlo al agruparlo.
Con este enfoque, empaqueté mi módulo usando npm, lo instalé y lo usé en otro proyecto, que también usa webpack.
Todavía tengo que probar con SystemJS.
La solución de @David está un poco desactualizada dado que ahora angular2 se puede actualizar, funciona para anular 2/3. Para angular 4 y superior arrojaría un error de solicitud no encontrada, así es como lo modifiqué,
encabezado.componente.ts
... declare var require: any; @Component({ selector: 'header', templateUrl: './header.component.html', // Auto required by webpack }) export class HeaderComponent { private LOGO = require("./assets/logo.png"); constructor() {}; }encabezado.componente.html
<div> <img [src]="LOGO" /> </div>Solucionaría este problema dividiendo la ruta src en 2 partes, así:
<img class="logo" [src]="(imgPath + imgFileName)" />luego, dentro de la definición del componente, establece:
@Input() imgPath:string = "app/header/"; imgFileName:string = "logo.png";Al usar el decorador @Input(), la variable imgPath se puede ver externamente, de modo que en caso de que mueva el componente a otro lugar, puede establecer una ruta diferente, haciendo que el componente sea reutilizable.