有没有办法在Angular中将html元素赋值给变量？

Question

我正在把一个react应用程序转到angular。我有一个组件，它需要一个输入属性，并使用它来组装它所需的图标，有时使用几个不同的元素。我遇到的问题是，当我试图以我在React中习惯的方式将元素赋给变量时，angular会抱怨。

React组件：

import React from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { faShareAlt, faBars, faClipboardCheck, faEnvelope, faExchangeAlt, faUndoAlt, faPlus, faMinus, faQuestion, faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
import { faEdit, faClipboard, faCopy, faClone, faSquare } from '@fortawesome/free-regular-svg-icons';
import { faTwitter, faFacebookF, faRedditAlien, faTumblr, faPinterest, faInstagram } from '@fortawesome/free-brands-svg-icons';

export default class RosterIcon extends React.Component {

  render(){
    let icons = {
      copy: <FontAwesomeIcon icon={faCopy} />,
      reset: <FontAwesomeIcon icon={faUndoAlt} transform='shrink-2' />,
      menu: <FontAwesomeIcon icon={faBars} />,
      question: <span className="fa-layers fa-fw"><FontAwesomeIcon icon={faSquare}/><FontAwesomeIcon icon={faQuestion} transform="shrink-6" /></span>,
      confirm: <span className="fa-layers fa-fw"><FontAwesomeIcon icon={faSquare}/><FontAwesomeIcon icon={faCheck} transform="shrink-6" /></span>,
      cancel: <span className="fa-layers fa-fw"><FontAwesomeIcon icon={faSquare}/><FontAwesomeIcon icon={faTimes} transform="shrink-6" /></span>,
      clone: <span className="fa-layers fa-fw"><FontAwesomeIcon icon={faClone}/><FontAwesomeIcon icon={faPlus} transform="shrink-6 right-1.5 up-1.5" /></span>,
      add: <span className="fa-layers fa-fw"><FontAwesomeIcon icon={faSquare}/><FontAwesomeIcon icon={faPlus} transform="shrink-6" /></span>,
      delete: <span className="fa-layers fa-fw"><FontAwesomeIcon icon={faSquare}/><FontAwesomeIcon icon={faMinus} transform="shrink-6" /></span>,
      switch: <FontAwesomeIcon icon={faExchangeAlt} />,
      share: <FontAwesomeIcon icon={faShareAlt} transform='shrink-2' />,
      edit: <FontAwesomeIcon icon={faEdit} />,
      email: <FontAwesomeIcon icon={faEnvelope} size='xs' />,
      clipboard: <FontAwesomeIcon icon={faClipboard} />,
      clipped: <FontAwesomeIcon icon={faClipboardCheck} />,
    }
    return(
      icons[this.props.icon]
    );

  }

}

角度组件(目前为止)：

import { Component, Input, OnInit } from '@angular/core';

import { faShareAlt, faBars, faClipboardCheck, faEnvelope, faExchangeAlt, faUndoAlt, faPlus, faMinus, faQuestion, faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
import { faEdit, faClipboard, faCopy, faClone, faSquare } from '@fortawesome/free-regular-svg-icons';
import { faTwitter, faFacebookF, faRedditAlien, faTumblr, faPinterest, faInstagram } from '@fortawesome/free-brands-svg-icons';

@Component({
  selector: 'app-rostericon',
  template: `<fa-icon [icon]="icons[icon]"></fa-icon>`,
  styleUrls: ['./rostericon.component.scss']
})
export class RostericonComponent implements OnInit {
  @Input() icon:string;
  icons;
  constructor() { }

  ngOnInit(): void {
    this.icons = {
      copy: faCopy,
    }
  }

}

我想知道是否有可能模仿react组件的功能，在react组件中，我定义要保存在变量对象中的元素，然后轻松地将其呈现为模板。(也希望能够在没有innerHTML的情况下在多余的元素上呈现组件)

编辑:解决方案(谢谢@The James。我甚至可以使用默认的case语句来处理来自我计划使用的其他字体的图标)：

import { Component, Input, OnInit } from '@angular/core';

import { faShareAlt, faBars, faClipboardCheck, faExchangeAlt, faUndoAlt, faPlus, faMinus, faQuestion, faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
import { faEdit, faClipboard, faCopy, faClone, faSquare } from '@fortawesome/free-regular-svg-icons';
import { faTwitter, faFacebookF, faRedditAlien, faTumblr, faPinterest, faInstagram } from '@fortawesome/free-brands-svg-icons';

@Component({
  selector: 'app-rostericon',
  template: `
  <fa-icon *ngIf="iconData?.length === 1" [icon]="iconData[0].icon" [transform]="iconData[0].transform"></fa-icon>
  <span *ngIf="iconData?.length > 1" class="fa-layers fa-fw">
    <fa-icon *ngFor="let icon of iconData" [icon]="icon.icon" [transform]="icon.transform"></fa-icon>
  </span>
`,
  styleUrls: ['./rostericon.component.scss']
})
export class RostericonComponent implements OnInit {
  @Input() icon:string;
  iconData:Array<Object>;
  constructor() { }

  ngOnInit(): void {
    switch (this.icon) {
      case "copy":
          this.iconData = [
            {
              icon: faCopy,
              transform: '',
            },
          ]
          break;
      case "question":
          this.iconData = [
            {
              icon: faSquare,
              transform: '',
            },
            {
              icon: faQuestion,
              transform: 'shrink-6',
            },
          ]
          break;
      default:
        break;
    }
  }
}

Answer 1

react变量保存要插入到虚拟DOM中的JSX对象(而不是html)。

Angular不使用虚拟dom，如果您要做类似的事情(充其量)，您将在内存中持有对DOM对象的引用，并且会中断垃圾收集。

Angular使用实际的html模板，并使用代码替换，就像handlebars一样。因此，不需要像React那样创建一个集合，只需将每个图标添加到模板等中即可

这应该很容易处理您的大多数情况。(请原谅任何拼写错误，因为我没有测试任何东西)

import { Component, Input, OnInit } from '@angular/core';
    
@Component({
  selector: 'app-rostericon',
  template: `
      <i *ngIf="!layered" class="fa" [class]="iconClass" [style]="customStyle"></i>
      <span *ngIf="layered" className="fa-layers fa-fw">
          <i class="fa" [class]="layer1"></i>
          <i class="fa" [class]="layer2" style="transform: shrink-6"></i>
      </span>
  `,
  styleUrls: ['./rostericon.component.scss']
})
export class RostericonComponent implements OnInit {
  @Input() icon:string;
  customStyle: any = {};
  iconClass = "";
  layer1 = "";
  layer2 = "";
  layered: boolean = false;
  constructor() { }

  ngOnInit(): void {
    switch (icon) {
        //example of how to handle the case
        case "copy":
            customStyle = { fontColor: red };
            iconClass = "fa-copy";
            break;
        case "reset":
            customStyle = { fontColor: red };
            iconClass = "fa-undo-alt";
            break;
        case "question":
            layered = true;
            layer1 = "fa-square";
            layer2 = "fa-question";
            break;
        case ...
        case ...
        case ...
    }
  }

}