Question

我正在将React应用程序旋转到角度。我有一个需要输入道具的组件，并使用它来组装所需的图标，有时会使用几个不同的元素。我遇到的问题是，当我尝试以我在React中惯用的方式将元素分配给变量时，Angular会抱怨。

反应成分：

idDateArray

角度组件（到目前为止）：

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]
    );

  }

}

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

编辑：解决方法（感谢@The James。我什至可以使用默认的case语句来处理打算使用的其他字体的图标）：

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

}

Answer 1

react变量持有一个要插入到虚拟DOM中的JSX对象（不是html）。

Angular不使用虚拟dom，并且如果要做类似的事情，（充其量），您将拥有对DOM对象的内存引用，并且您将破坏垃圾回收。

Angular使用实际的html模板进行代码替换，例如把手。因此，与其在React中创建一个集合，不如在模板中添加每个图标等等等等等等

这应该可以轻松处理您的大多数情况。（原谅我没有做任何测试的错别字）

select @militaryendtime

有什么方法可以将html元素分配给Angular中的变量？

1 个答案: