В angular2 я хочу добавить плагин addthis к определенному маршруту, например. my/blog url, но когда я добавляю библиотеку скриптов, он не работает

Question

В Angular2 я хочу добавить addthis плагин на конкретный маршрут, например. мой /blog url, но когда я добавляю библиотеку скриптов, он не работает.

Это только кажется, работать на index.html, а не на определенную точку зрения, как blog.html

Answer 1

Хотя вы спросили об угловом 2 с машинописью, я буду, возможно, дать вам упреждение на то, что работал для меня , используя угловой 1,5 и Ui-Router, она не может быть именно то, что вам нужно, но, надеюсь, вы могли бы работать свой путь оттуда:

используя эту ng-addthis услуги вы можете загрузить AddThis виджета для конкретного маршрута, как так:

var app = angular.module('app', ['ng-addthis']); 

app.config(function($stateProvider, addThisService) { 
$stateProvider.state('app.dashboard', { 
    // ... other stuff ... 
    resolve: { 
    addThisService: function(addThisService) { 
    addThisService.loadProject('ra-12345678'); 
    } 
    } 
}); 
}); 

с нг-AddThis ридми:

Важным аспектом является то, что вы не можете иметь виджет AddThis на всех страницах. Так что есть функция, которую вы можете использовать, чтобы скрыть скрипт. Например, это можно использовать для изменения состояния.

angular.module('app') 
.run(['$rootScope', 'addThisService', function($rootScope, addThisService) { 
    $rootScope.$on('$stateChangeStart', 
     function(event, toState, toParams, fromState, fromParams) { 
      if (toState.name === 'your--state') { 
       addThisService.loadProject('ra-12345678'); 
      } else { 
       addThisService.hideLayers(0); 
      } 
     }); 
}]); 

Answer 2

Здесь вы идете: Я реализовал это для моего случая использования следующих нг-AddThis, но добавив несколько дополнительных проверок для угловых ССР.

/** 
* https://stackoverflow.com/questions/35538552/in-angular2-i-only-want-to-add-the-addthis-plugin-to-a-specific-route-e-g-my-b 
* Reinitiate add this. 
*/ 

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { Subscriber } from 'rxjs/Subscriber'; 

@Injectable() 
export class AddThisService { 
    constructor(){} 
    private removeScript(){ 
     let element  = null; 
     let divElements = null; 
     let divElement = null; 

     element = document.getElementById('addthis-js'); 
     if (element) { 
      element.parentNode.removeChild(element); 
     } 

     divElement = document.getElementById('_atssh'); 
     if (divElement) { 
      divElement.style.display = "none"; 
     } 

     divElements = document.getElementsByClassName('addthis-smartlayers'); 
     while (divElements.length > 0) { 
      divElements[0].parentNode.removeChild(divElements[0]); 
     } 

     divElements = document.getElementsByClassName('addthis-smartlayers-desktop'); 
     while (divElements.length > 0) { 
      divElements[0].parentNode.removeChild(divElements[0]); 
     } 

     divElements = document.getElementsByClassName('addthis-smartlayers-mobile'); 
     while (divElements.length > 0) { 
      divElements[0].parentNode.removeChild(divElements[0]); 
     } 

     return true; 
    } 
    showLayers() { 
     var divElements = null; 
     var divElement = null; 
     console.log('what here..'); 

     divElement = document.getElementById('_atssh'); 
     if (divElement) { 
      divElement.style.display = "block"; 
     } 

     divElements = document.getElementsByClassName('addthis-smartlayers'); 
     for (var i = 0; i < divElements.length; i++) { 
      divElements[0].style.display = "block"; 
     } 

     divElements = document.getElementsByClassName('addthis-smartlayers-desktop'); 
     for (var i = 0; i < divElements.length; i++) { 
      divElements[0].style.display = "block"; 
     } 

     divElements = document.getElementsByClassName('addthis-smartlayers-mobile'); 
     for (var i = 0; i < divElements.length; i++) { 
      divElements[0].style.display = "block"; 
     } 

     return true;   
    } 

    hideLayers() { 
      var divElements = null; 
      var divElement = null; 

      divElement = document.getElementById('_atssh'); 
      if (divElement) { 
       divElement.style.display = "none"; 
      } 

      divElements = document.getElementsByClassName('addthis-smartlayers'); 
      for (var i = 0; i < divElements.length; i++) { 
       divElements[0].style.display = "none"; 
      } 

      divElements = document.getElementsByClassName('addthis-smartlayers-desktop'); 
      for (var i = 0; i < divElements.length; i++) { 
       divElements[0].style.display = "none"; 
      } 

      divElements = document.getElementsByClassName('addthis-smartlayers-mobile'); 
      for (var i = 0; i < divElements.length; i++) { 
       divElements[0].style.display = "none"; 
      } 

     return true; 
    } 

    private loadProject(key: string, hideLayers:boolean) { 
     return Observable.create((observer: Subscriber<any>) => { 
      switch (true) {     
       case (!document || !window): 
       /** 
       * For Angular Universal 
       */ 
        observer.error('Cannot render it on Server'); 
        observer.complete(); 
       case ((document.getElementById('addthis-js') != null)): 

        if (hideLayers) { 
         this.hideLayers(); 
        } else { 
         this.showLayers(); 
        } 
        if ((<any>window).addthis.layers && (<any>window).addthis.layers.refresh) { 
         (<any>window).addthis.layers.refresh(); 
        } 
        observer.next(true); 
        observer.complete(); 
        break; 

       case (!key): 
        observer.error('no-project'); 
        observer.complete(); 
        break; 

       default : 
        var script = document.createElement('script'); 
        script.type = 'text/javascript'; 
        script.id  = 'addthis-js'; 
        script.async = true; 
        script.src = 'https://s7.addthis.com/js/300/addthis_widget.js#pubid=' + key; 
        script.onload = (ev: Event) =>{ 
         if (hideLayers) { 
          this.hideLayers(); 
         } else { 
          this.showLayers(); 
         } 
         (<any>window).addthis.init(); 
         observer.next(true); 
         observer.complete(); 
        }; 

        var first = document.getElementsByTagName('script')[0]; 
        first.parentNode.insertBefore(script, first); 
      } 
     }); 
    } 
    /** 
    * 
    * @param accountKey eg. ra-13245612346 
    * @param hideLayers eg. true for hiding in a particular state and true for showing in another. 
    */ 
    initAddThis(accountKey:string, hideLayers:boolean):Observable<any> { 
     return this.loadProject(accountKey, hideLayers); 
    }; 
} 

Затем вводит услугу в провайдерах раздел главного модуля и использовать его в ngAfterViewInit крючке, как показано ниже:

ngAfterViewInit() { 
    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only. 
    //Add 'implements AfterViewInit' to the class. 
    this._addThis.initAddThis('ra-123456asdf', false).subscribe(); 
} 

Вы можете также использовать isPlatformBrowser метод для проверки платформы перед вызовом initAddThis метода, если вы используете Angular Universal.