我接手了一个相当糟糕的项目。我正在努力弄清楚为什么之前的开发人员决定编写这样的社交图标组件。我不确定如何处理每个单击时的urls。这就是我现在拥有代码的地方。

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>

转载请注明出处:http://www.dannyxu.com/article/20230526/1781251.html

随机推荐

  1. 记一次Emotet木马处理案例

    0x00、前言 用户的安全意识相对薄弱,面对来历不明的链接和附件,容易被诱导从而遭受木马的入侵。在日常使用过程中,有时电脑中病毒后会遇到木马查杀不掉的情况,应该是如何处理呢?下面分享一个Emotet木马处理的案例,希望对你有所帮助。 0x...

  2. 处理多个http响应并在单个方法中一次返回它们

    我有具有这些方法的控制器和服务类。服务类public ResponseEntitiy methodA(Model model) { if(model.contains(val1)) { service(val1); } if(mo...

  3. 每天11pmUTC处理Cosmosdb一次

    我有一个Azure Service Fabric应用程序,它具有实例化和监视CosmosDB更改提要的worker角色。我试着让它每天运行一次,在一天结束的时候。除了让它在任何特定的时间只运行一次之外,一切都可以正常工作。我目前利用的Fee...

  4. Snakemake shell命令应该一次只处理一个文件,但它试图一次处理多个文件

    首先,如果我没有解释清楚我的问题,我很抱歉,英语不是我的母语。我正在尝试创建一个snakemake规则,它接受一个fastq文件,并使用一个名为Filtlong的程序对其进行过滤。我有多个要运行此规则的fastq文件,它应该为每个fastq...

  5. 使用线程和/或多处理一次移动多个乌龟

    你好,我是python的新手,也是栈交换的新手。我正在尝试创建一个空间入侵者游戏使用乌龟,但我有一个问题,我的枪不能射击,直到所有的外星人完成入侵。我想我有这个问题是因为入侵功能和射击功能没有同时运行,或者是因为turtle不允许一只以上的...

  6. jparespositry saveAll一次可以处理的最大记录数是多少?

    在我的spring-boot应用程序中,我正在运行一个计划作业,该作业从一个表中获取记录并将其保存为存档,我刚刚遇到了一个问题,所以现在我选择保存的记录大约是400,000多条,当作业执行时,它只是继续进行。ja可以处理一次保存的这么多数据...

  7. .NET核心-在启动时优雅地处理失败,并在下一次请求时重试

    我有一个运行在.NET上的服务。作为启动的一部分,该服务将连接到RabbitMQ。但是,如果由于某种原因连接失败,那么服务将在启动期间崩溃。在IIS快速失败保护策略生效并关闭应用程序池之前,这种情况会发生多次。然后需要手动重新启动才能让程序...

  8. 如何处理多个页签的一次服务工作者消息?

    我有一个应用程序,我想阻止来自另一个选项卡的消息处理。//client var msg_chan = new MessageChannel(); // Handler for recieving message reply from se...

  9. 一次处理一组数字

    我使用下面的代码将一个大文本文件file1‘分割成64个字节的集合。我希望这段代码处理前64个字节,然后将数据提供给Main()进行进一步处理。一旦Main()中的处理完成,我希望程序返回到这里来处理下一组64字节,依此类推,直到file1...

  10. 一次现场mysql重复记录数据的排查处理实战记录

    目录前言 分析 数据总计 重复次数占比 where 和 having 的区别 总结 前言 我当时正好出差在客户现场部署调试软件,有一天客户突然找到我这里,说他们现场生产的数据出现了异常的情况,最直接的表现就是 同一个标签,出现在了多个物...