当使用Angular2开发时，AddThis标记随机出现

Question

问题描述

我的 AddThis 插件在 Codepen 中完美无缺，

但如果我在Angular2 APP中使用它，

，我把 AddThis 标签......

（例如，在我的案例中：<div class="addthis_inline_share_toolbox_vnqn"><div>）

在我的一个componentA中，将在某些情况下呈现

（例如，我点击特定按钮，然后将呈现componentA）

和它有效（看起来！），但下次可能无效（不显示！）

发生了什么？我没有这个想法...

代码演示

app.component.ts

@Component({
  selector:      'app',
  template:   `


    <!-- I send HTTP GET by clicking the button via LoadingService -->
    <div>
      <button on-click="_loadingService.queryThisServiceDetail()">
           Show Service Detail
      </button>
    </div>


    <!-- 
       After LoadingService get the data from json-server, 
       async pipe will inject that data into _thisServiceDetail$
       then moneyProcessor property: serviceDetail will get that data
    -->
    <moneyProcessor #service
      [serviceDetail]="_thisServiceDetail$ | async">
    </moneyProcessor>


    <!-- 
       The moneyProcessor's property: thisServiceTotalPrice is Observable, 

所以在moneyProcessor处理来自LoadingService的钱后，moneyProcessor会将其中一个数据（本例中的总价格）注入其属性：thisServiceTotalPrice，          - ＆GT;                  

`
})        
export class App {
    private _thisServiceDetail$: Observable<any>;
    constructor( 
       private _loadingService: LoadingService 
    ){
         this._thisServiceDetail$ = this._loadingService.thisServiceDetail$;
    }

}

loading.service.ts

@Injectable()
export class LoadingService {

  // Because i use webpack proxy,
  // this url will be redirect to my json-server url (says, localhost:8080, whatever)
  const BASE_URL:string = "http://localhost:3000/service_detail/";

  private _thisServiceDetail$ = new Subject<any>();
  public thisServiceDetail$:Observable<any> = this._thisServiceDetail$.asObservable();

  constructor(private http: Http) {}

  public queryThisServiceDetail() {

    this.http
        .get(  BASE_URL   )
        .map(  (res:Response) => res.json()  )
        .subscribe(  data => this.injectThisServiceDetail( data )  );
  }

  public injectThisServiceDetail(data:any):void {
    this._thisServiceDetail$.next(data);
  }

}

money-presentater.component.ts

@Component({
  selector:      'moneyPresentater',
  template:`

    <!-- THIS IS MY ADDTHIS PLUGIN DEFINITION -->
    <div class="addthis_inline_share_toolbox_vnqn" 
         data-url="http://localhost:3000/online-offering/quick-intro"    
         data-title="Angular2 Webpack Starter by @gdi2290 from @AngularClass">
         <a class="addthis_button_facebook" style="cursor:pointer"></a>
         <a class="addthis_button_twitter" style="cursor:pointer"></a>
         <a class="addthis_button_lineme" style="cursor:pointer"></a>
         <a class="addthis_button_wechat" style="cursor:pointer"></a>
    </div>         

    <div>{{_serviceTotalPrice}}</div>
  `
)}
export class MoneyPresentater {
   private _serviceTotalPrice:number = 0;
   @Input() serviceTotalPrice:Observable<number>;

   constructor(private CDRef:ChangeDetectorRef) {}

   ngViewInit() {
     addthis.init();
     addthis.toolbox('.addthis_inline_share_toolbox_vnqn');
   }

   ngOnInit() {

      this.totalPriceSubscription = this.serviceTotalPrice.subscribe(price=>{
        this._serviceTotalPrice = price;

        // sorry about this,
        // i need to re-trigger change detection
        // because my code is not well
        // i have no time to refactor it at now
        this.CDRef.detectChanges();  
    });

   }
}