¿Cómo resolver el problema de ruta templateUrl y styleUrl en Angular 2?
Prólogo:
templateUrl representa la dirección de plantilla en la que se basa el componente cuando se ejecuta en el navegador, por lo que templateUrl no se puede completar aquí. Ruta /xxx.html, debes considerarla desde la ruta del navegador
src
index.html
index.js // Puede generarse después del empaquetado
Componente
botón
botón.ts
botón.html
Cuando abras index.html, piénsalo, ¿qué es la ruta para cargar button.html, /components/button/button.html
Por lo tanto, la plantillaUrl en button.ts debe ser /components/button/button.html
. html
Se puede ver que la ruta de templateUrl debe basarse en la ruta del archivo html que estás ejecutando.
Problema
Si la templateUrl de cada componente en la carpeta del componente Todos deben escribirse como /components, lo cual no es muy problemático. Por supuesto, la ruta aquí es relativamente simple y corta, si la ruta es muy larga, /a/b/c/d/e. /f/components, ¿no estarías en cada uno? La dirección del componente debe escribirse con tanto tiempo y cada archivo debe modificarse cuando se modifique en el futuro.
Solución
Angular 2 te ayuda a pensar en esto usando paquetes: o activos: marcadores de posición (correspondientes a /paquetes de forma predeterminada) cuando configuras templateUrl:'paquete:/botón/botón .html', esa dirección será reemplazada en tiempo de ejecución con la dirección del componente. Cuando configura templateUrl:'paquete:/button/button.html', la dirección será reemplazada por /packages/button/button.html en tiempo de ejecución, momento en el cual debemos restablecer el token al PACKAGE_ROOT_URL proporcionado Cambiar el marcador de posición predeterminado dirección
importar {provide,PACKAGE_ROOT_URL} de 'angular2/customer.html' a 'angular2/customer.html'.URL} de 'angular2/core';
bootstrap(App ,[provide(PACKAGE_ROOT_URL,{useValue: '/components'})])
Esto se compilará en tiempo de ejecución en /components/button/button.html
Un problema más complejo
Los marcadores de posición paquete: o activo pueden resolver el problema de la ruta cargada en tiempo de ejecución durante el desarrollo. Cuando el proyecto se lanza al entorno oficial, nuestros archivos estáticos deben estar en CDN. Por supuesto, este problema de ruta. También se puede resolver a través de PACKAGE_ROOT_URL.
La URL también puede resolver este problema de ruta, pero no es lo suficientemente flexible. Si quiero cargar desde templateUrl y cargar desde styleUrl, entonces un solo PACKAGE_ROOT_URL no puede resolver este problema
Solución
En el código fuente de Angular 2, no importa qué plantilla Urrl y estilo Urrl sea, será procesado por el objeto UrlResolver antes de cargarlo. El objeto UrlResolver se obtiene mediante inyección de dependencia y el código fuente se encuentra en src/compiler/. url_resolver.
I.
@Component({
selector: "hz-stepbody",
templateUrl: "dm_ template. html"//Ten en cuenta que no puedes usar /dm_template.html
})
class Stepbody { }
importar {UrlResolver} desde 'angular2/ compilador';
clase MyUrlResolver extiende UrlResolver {
resolve(baseUrl: cadena, url: cadena): cadena {
if (url.substr(-4 ) === '.css') {
return super.resolve('', url);
}si no (url.substr(-5) === ' .html'){
return super.resolve('', url);
}
return super .resolve(baseUrl, url);
}
}
bootstrap(App, [provide(UrlResolver, {useClass: MyUrlResolver})]);
Dos.
@ Componente({
selector: "hz-stepbody",
templateUrl: "mytemplate:dm_template.html"
})
clase Stepbody { }
importar {proporcionar, PACKAGE_ROOT_URL} desde 'angular2/core';
importar {UrlResolver} desde 'angular2/compiler';
clase MyUrlResolver extiende UrlResolver {
resolve(baseUrl: cadena, url: cadena): cadena {
var resolveUrl = url;
if (url.substr(0, 6) == " miplantilla") {
resolvedUrl = resolveUrl.replace("miplantilla:", "/template/gz/");
}else {
resolvedUrl = super.resolve( baseUrl, url);
}
return resolveUrl;
}
}
}
}<
/p>
}