Question

我已经使用ng2共享按钮插件在我的角度2项目中实现了共享功能，并且它正常工作，即，在共享提要并且某些用户点击该共享提要后，他被重定向到我分享的链接但我希望他登陆我的网站登录页面进行身份验证？

这是我的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;        


    }

Answer 1

好的，首先，问题是错误的。你需要证明这篇文章。要使用它，您需要使用can Activate

的angular2属性

在路由模块中：

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

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

说明：article是您要保护的组件。 LoginService如果用户登录则返回true的服务，如果不是false，则返回true。

以下是登录服务的片段。

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。因为在这种情况下，用户将留在该页面上。

参考：https://angular.io/docs/ts/latest/api/router/index/CanActivate-interface.html 您可能希望阅读上面的参考资料以便更好地理解，并且可以以不同的逻辑方式实现。这是我一直用于我的应用程序的静态方法。可能会有更多。

PS：如果我的方式不对，请告诉我。欢迎提出意见。

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

1 个答案: