在Angular 2中使用ng2共享按钮共享

我已经在我的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;   


    }

来源

2017-02-27 Utkarsh Gautam

有没有什么地方可以添加'callback-url'？这可能是你需要的东西。我也可以知道哪些ng2share组件正在使用？ – Smit

您可以在订阅方法中添加回调方法，并且这是ng2的链接Share按钮https://github.com/MurhafSousli/ng2-sharebuttons –

是否有使用令牌的逻辑，即如果令牌为空用户将被重定向到登录页面或类似的东西。 –

好吧，首先，这个问题是错误的。您需要对文章进行验证。为了使用，你需要使用的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：请让我知道如果我做错了方式。欢迎评论。

来源

2017-02-27 07:19:08 Smit

在Angular 2中使用ng2共享按钮共享

回答

相关问题