web-dev-qa-db-ja.com

Angular-2：構成ごとにファビコンアイコンを変更

アプリケーションで動的なページ、メニュー、その他のアイテムをレンダリングしています。また、管理者が設定したファビコンを変更したいと思います。

たとえば、page load設定されたファビコンがxyz.pngその後、xyz.pngファビコンとして。

下の画像のように、新しいファビコンは「Test Application」の近くにある既存のファビコンを置き換える必要があります。現在、以下に示すようにデフォルトのファビコンが表示されています。

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>

コンポーネントの読み込みごとに新しいファビコンを取得するため、コンポーネント呼び出しからファビコンアイコンを変更するだけです。

angularfavicon
15
Sandip - Full Stack Developer

サービスで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);

    }


}
0
Parshwa Shah

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';
23
Verri

バックエンドでnodejsを実行しています。要件として表示するURL固有のファビコンがあります。

App.jsでは、URL固有の構成を取得するのに役立つresolveConfig()関数を実装しました。

上記の関数の戻り値は、以下のget favicon呼び出しで使用されます。

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"/>

*これは、バックエンドにnodejsがある場合に便利です。

0
Krish

次に、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>
0
shershen