Angular-2:根据配置更改图标图标 [英] Angular-2 : Change favicon icon as per configuration
问题描述
我正在我的应用程序中呈现动态页面，菜单和其他项目. 我也想按照管理员的配置更改图标.
I am rendering a dynamic page, menu and other items in my application. I also want to change favicon as per configured by admin.
例如，如果当我配置的页面加载图标为xyz.png时，它将显示xyz.png作为图标.
Say, for example, if when my page load configured favicon is xyz.png then it will show xyz.png as the favicon.
如下图所示，新图标将由测试应用程序"替换附近的图标.现在，它显示了默认的图标，如下所示.
As in the below image, new favicon should replace existing one near by "Test Application". Right now, it shows the default favicon as seen below.
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>
每次加载组件时都会得到一个新的图标，因此您只需从任何组件调用中更改图标图标即可.
I get a new favicon on every component load, so you have to just change favicon icon from any component call.
推荐答案
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, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Rx';
@Injectable()
export class AppService {
constructor(@Inject(DOCUMENT) private _document: HTMLDocument, 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){
this._document.getElementById('appFavicon').setAttribute('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);
}
}
这篇关于Angular-2:根据配置更改图标图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
