2017-02-27 66 views
0

我已經在我的angular 2項目中使用ng2 Share按鈕插件實現了共享功能,它正常工作一件事情,即在共享Feed之後,某些用戶點擊該共享Feed之後,被重定向到我分享的鏈接,但我希望他登陸我的網站登錄頁面進行身份驗證?在Angular 2中使用ng2共享按鈕共享

這裏是我的HTML代碼: -

  <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
      <div class="flipper"> 
       <div class="front"> 
        <img class="like_2" alt="image" (click) = "shareIt(i)" src="assets/img/Fwd Icons/share.png"> 
       </div> 
       <div class="back"> 
           <div class="row" > 
         <section class="widget sharing_buttons_widget"> 
          <share-buttons (click) = "closeShareIt(i)" [url]=" myFeed.contentUrl " 
           [count]="false" 
           [totalCount]="true" 
           [defaultStyle]= "true" 
           (popUpClosed) = "true" 
           [google]="googleInner" 
           [pinterest]="false" 
           [linkedIn]="false" 
           [tumblr]="tumblrInner" 
           [reddit]="false" 
           [stumbleUpOn]="false"> 
          </share-buttons>     
         </section> 
        </div> 
       </div> 
      </div> 
      </div> 

,在我的組件文件: -

hideFeed(myFeed){ 
     const FeedStar = { 
     'FeedUId' : myFeed.uid 
     }; 
     this.feedService.DynamicArticles(FeedStar).subscribe(
     data => { 

      }); 

      this.iframeURL = this.sanitizer.bypassSecurityTrustResourceUrl(  myFeed.contentUrl); 
      this.showIframe = true;   


    } 
+0

有沒有什麼地方可以添加'callback-url'?這可能是你需要的東西。我也可以知道哪些ng2share組件正在使用? – Smit

+0

您可以在訂閱方法中添加回調方法,並且這是ng2的鏈接Share按鈕https://github.com/MurhafSousli/ng2-sharebuttons –

+0

是否有使用令牌的邏輯,即如果令牌爲空用戶將被重定向到登錄頁面或類似的東西。 –

回答

0

好吧,首先,這個問題是錯誤的。您需要對文章進行驗證。爲了使用,你需要使用的angular2

can Activate財產在你的路由模塊:

import { LoginService } from './login/login.service' 
import { article } from './helpers/result/article.component' 

const routes: Routes = 
[ 
{ path: 'article/:id', canActivate:[LoginService], component:article} 
]; 

說明:本文是要保護的組件。 LoginService如果用戶登錄的話將返回true的服務,如果不是false的話。

下面是登錄服務的片段。

import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router'; 
@Injectable() 
export class LoginService implements CanActivate { 
canActivate(route: ActivatedRouteSnapshot): boolean { 

if(user.loggedIn) 
{ 
return true; 
} 
else 
{ 
this._router.navigate(['/login']); 
return false 
} 
} 
} 

說明:canActivate方法是從類canActivate擴展而來的。這種方法在你的邏輯下降。你可以檢查用戶是否登錄返回true ...然後用戶可以看到文章,如果你返回false,它將導航到登錄。你cant只是沒有導航返回false。因爲在這種情況下,用戶將停留在該頁面上。

Ref:https://angular.io/docs/ts/latest/api/router/index/CanActivate-interface.html 您可能希望閱讀上述參考資料以更好地理解並可能以不同的邏輯方式實施。這是我用於我的應用程序的靜態方法。可能還有更多。 PS:請讓我知道如果我做錯了方式。歡迎評論。