Angular-2：根据配置更改favicon图标

我正在渲染我的应用程序中的动态页面，菜单和其他项目。我也想按照管理员配置更改图标。Angular-2：根据配置更改favicon图标

说，例如，如果当我页面加载配置图标是xyz.png它就会出现xyz.png的图标。

如下图所示，新的favicon应该替换现有的“测试应用程序”。现在，它显示了默认的favicon，如下所示。

Default 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>

我得到的每一个组件加载一个新的图标，所以你必须刚从任何组件调用更改图标图标。

来源

2016-10-04 Sandip Patel

什么构建方案，你呢？你的问题太笼统，没有html代码，你有 – shershen

@Shershen：我已经更新html，请参考它 –

你可以在你的服务中使用jQuery/JS。做一个功能，将动态加载您的应用程序图标是这样的：

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); 

    } 


}

来源

2016-10-07 12:10:27

它适用于我 –

不能相信这个答案收到这么多的投票，而它建议用jquery mod dom – phil1234

然后你就可以使用JavaScript通过增加以下功能您<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>

来源

2016-10-06 07:04:59 shershen

它应该从组件设置，因为我得到了新的图标在权力，它会动态的页面 –

-2

外<application></application>，你可以只使用Title类：

import {Title} from '@angular/platform-browser'; 

export class YourClass(){ 

    constructor(private title: Title){} 

    yourNameMethod(){ 
    this.title.setTitle('your title'); 
    } 
}

来源

2016-10-06 09:59:25 ktretyak

我已经设置标题，你可以在图像中看到，现在我想设置favicon图标，你可以请帮我关于该 –

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');

角5.0>

import { DOCUMENT } from '@angular/platform-browser';

来源

2017-08-18 09:47:48 Verri

import {DOCUMENT } from @ angular/platform-browser'; – phil1234

Angular-2：根据配置更改favicon图标

回答

相关问题