Angular-2:根据配置更改favicon图标
我在我的应用程序中呈现动态页面,菜单和其他项目.我还想根据管理员的配置更改favicon.
比方说,例如,如果我的页面加载配置了favicon,xyz.png那么它将显示xyz.png为favicon.
如下图所示,新的图标应替换"测试应用程序"附近的现有图标.现在,它显示默认的图标,如下所示.
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>
我在每个组件加载时都会获得一个新的favicon,因此您只需从任何组件调用中更改favicon图标.
Ver*_*rri 25
在index.html中设置链接标记
<link id="appFavicon" rel="icon" type="image/x-icon" href="favicon.ico">
以及代码导入中的某个位置
import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
constructor(@Inject(DOCUMENT) private _document: HTMLDocument) {}
并像这样使用它
this._document.getElementById('appFavicon').setAttribute('href', '/your/icon/path.ico');
Angular 5.0>
import { DOCUMENT } from '@angular/platform-browser';
- 这个解决方案工作正常，但对于 **Angular 8.0 或 >** `import { DOCUMENT } from '@angular/common';` (3认同)
Par*_*hah -2
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);
}
}
- 不敢相信这个答案收到了这么多选票，同时它建议用 jquery 修改 dom (17认同)
- 绝对地。Angular 有许多 DOM 相关引擎来做到这一点。永远不要使用 jQuery。 (6认同)
- **永远不要在 Angular 中使用 jQuery** 你不应该在 Angular 组件生命周期之外操作 DOM (6认同)