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

Question

I have implented sharing functionality in my angular 2 project using ng2 Share buttons pluggin and it is working properly excpet one thing ie, after the feed is shared and some user clicks on that shared feed he gets redirected to the the link I shared but I want him to land up on my websites login page for authentication purpose?

Here is my HTML code:-

          <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>

and in my component file:-

   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

Okay, first of all, the question is wrong. You need to authenthicate the article. In order to use that you need to use can Activate property of angular2

In your routing module:

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

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

Explanation: article is the component you want to protect. LoginService the service that will return true if the user is logged in if not false.

Below is the snippet of login service.

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
}
}
}

Explanation: the canActivate method is extended from the class canActivate. This method where your logic falls. You can check if the user is logged in return true... then user can see the article, if you return false, it will navigate to login. You cant just return false without navigate. because in that case the user will stay on that page.

Ref: https://angular.io/docs/ts/latest/api/router/index/CanActivate-interface.html You may wish to read the above reference to understand better and may be implement in a different logical manner. This is static approach i have been using for my application. There might be more.

PS: Please let me know if i am doing in a wrong manner. Comments are welcomed.