Je suis en train de rendre une page dynamique, un menu et d'autres éléments dans mon application . Je veux aussi changer le favicon comme configuré par admin.
Par exemple, si, lorsque mon favicon configuré avec page load est xyz.png
, il affichera xyz.png
comme favicon.
Comme dans l'image ci-dessous, le nouveau favicon devrait remplacer celui existant à proximité de "Test Application". À l'heure actuelle, il affiche le favicon par défaut, comme indiqué ci-dessous.
index.html
:
<!DOCTYPE html>
<html>
<head>
<base href="/MyFirstAngular2/" >
<title>Angular 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" id="appIcon" href="/favicon.ico" type="image/x-icon" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
<link href="css/Site.css" rel="stylesheet" />
<script src="scripts/jquery-2.2.1.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/main/shim.min.js"></script>
<script src="scripts/main/zone.js"></script>
<script src="scripts/main/reflect-metadata.js"></script>
<script src="scripts/main/system.src.js"></script>
<script src="scripts/system.config.js"></script>
<script>
document.SYSTEMJS_CONFIG.map.app = 'scripts/configs';
document.SYSTEMJS_CONFIG.packages.app = { main: 'application.ts', defaultExtension: 'ts' };
System.config(document.SYSTEMJS_CONFIG);
System.import('app').catch(function (err) {
console.error(err);
});
</script>
</head>
<body>
<application></application>
</body>
</html>
Je reçois un nouveau favicon à chaque chargement de composant, il vous suffit donc de changer l'icône de favicon à partir de n'importe quel appel de composant.
Vous pouvez utiliser jQuery/JS dans votre service. Créez une fonction qui chargera votre favicon d'application dynamiquement de la manière suivante:
app.module.ts
import {NgModule} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './path/to/app.component';
import {AppService} from './path/to/app.service';
// ....
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// ...
],
bootstrap: [AppComponent],
providers: [AppService]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
app.service.ts
import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Rx';
@Injectable()
export class AppService {
constructor(private http: Http) {}
getAppDetails(appId: string) {
return this.http.post(url, appId)
.map((response: Response) => {
let details = response.json();
return details;
})
.do(data => console.log(data))
.catch(this.handleError);
}
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
setAppFavicon(id: string, basepath: string, icon: string)
{
$("#"+id).attr("href", basepath+"/"+ icon);
}
}
app.component.ts
:
import {Component} from "@angular/core";
import {AppService} from "../path/to/app.service";
@Component({
selector: 'application',
templateUrl: './path/to/app.component.html'
})
export class ApplicationComponent {
details: any;
constructor(private appService: AppService) {
this.details = appService.getAppDetails(id);
appService.setAppFavicon(id,basepath,this.details.icon);
}
}
Dans index.html set tag link
<link id="appFavicon" rel="icon" type="image/x-icon" href="favicon.ico">
et quelque part dans votre importation de code
import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
constructor(@Inject(DOCUMENT) private _document: HTMLDocument) {}
et l'utiliser comme ça
this._document.getElementById('appFavicon').setAttribute('href', '/your/icon/path.ico');
angulaire 5.0>
import { DOCUMENT } from '@angular/platform-browser';
Nous avons des nœuds fonctionnant dans le back-end, nous avons un favicon spécifique à l'URL à afficher en tant qu'exigence.
Dans app.js, nous avons implémenté une fonction resolveConfig()
qui nous aidera à obtenir la configuration spécifique à l’URL.
La valeur de retour de la fonction ci-dessus est utilisée dans l'appel get favicon comme ci-dessous.
app.js
app.get('/favicon.ico',(req,res)=> {
let key = resolveConfig(req.hostname);
switch (key) {
case 'a':
res.sendFile(__dirname + '/dist/assets/a.ico');
break;
case 'b':
res.sendFile(__dirname + '/dist/assets/b.ico');
break;
}
});
index.html
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
* cela pourrait être utile si vous avez un nodejs dans le backend.
Ensuite, vous pouvez utiliser javascript pour définir favicon par configuration en ajoutant la fonction suivante à votre bloc <script>
:
<script>
document.SYSTEMJS_CONFIG.map.app = 'scripts/configs';
document.SYSTEMJS_CONFIG.packages.app = { main: 'application.ts', defaultExtension: 'ts' };
System.config(document.SYSTEMJS_CONFIG);
System.import('app').catch(function (err) {
console.error(err);
});
//here favicon is set
(function() {
var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = '../path/to/xyz.png'; //path to selected favicon file
document.getElementsByTagName('head')[0].appendChild(link);
}());
</script>