Обрабатывать несколько URL одним кликом - PullRequest
1 голос
/ 16 апреля 2020

Я принял проект в довольно плохом состоянии. Я изо всех сил пытаюсь выяснить, почему предыдущий разработчик решил закодировать компонент социальных иконок таким образом. Я не уверен, как обрабатывать URL для каждого при нажатии. Вот где у меня есть код сейчас.

TS:

import { Component, OnInit, ElementRef, EventEmitter } from "@angular/core";
import {faFacebook, faTwitter, faLinkedin} from "@fortawesome/free-brands-svg-icons";
import { FaIconComponent } from "@fortawesome/angular-fontawesome";


@Component({
  selector: "app-social-media",
  templateUrl: "./social-media.component.html",
  styleUrls: ["./social-media.component.scss"]
})
export class SocialMediaComponent implements OnInit {
  iconTwitter = faTwitter;
  iconFaceBook = faFacebook;
  iconLinkedIn = faLinkedin;
  public static SocialMediaClicked: EventEmitter<FaIconComponent> = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }
  onIconClicked(ele:FaIconComponent){
    SocialMediaComponent.SocialMediaClicked.emit(ele);
    console.log(ele);

  }

}

HTML:

<fa-icon aria-label="Twitter" class="bopd-footer-icon"
  #twitter
  (click)="onIconClicked(twitter)"
  [icon]="iconTwitter"
></fa-icon>
<fa-icon aria-label="LinkedIn" class="bopd-footer-icon"
  #linkedIn
  (click)="onIconClicked(linkedIn)"
  [icon]="iconLinkedIn"
></fa-icon>
<fa-icon aria-label="Facebook" class="bopd-footer-icon"
  #faceBook
  (click)="onIconClicked(faceBook)"
  [icon]="iconFaceBook"
></fa-icon>

1 Ответ

1 голос
/ 16 апреля 2020

он передает информацию о социальных сетях, включая имя, когда нажал icon, я думаю, что его следует удалить, потому что это бесполезно, вы можете добавить оператор switch-case для непосредственной обработки перенаправления:

constructor(private router: Router) { }    

onIconClicked(ele: any) {
            switch (ele) {
                case 'twitter':
                    this.router.navigate(['your_link_here']);
                    // or window.open(link, '_blank'); to open an external link in a new tab
                    break;
                case 'linkedIn':
                    this.router.navigate(['your_link_here']);
                    // or window.open(link, '_blank'); to open an external link in a new tab
                    break;
                case 'faceBook':
                    this.router.navigate(['your_link_here']);
                    // or window.open(link, '_blank'); to open an external link in a new tab
                    break;
                default:
                    break;
            }
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...