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圖標

回答

相關問題