给类以角度动态创建的按钮

Posted 2023-02-23

【中文标题】给类以角度动态创建的按钮

【英文标题】：Give class to dynamically created button in angular

【发布时间】：2020-07-20 13:36:32

【问题描述】：

我正在创建一个按钮并在 component.ts 中分配类。 css 的样式不适用于按钮（按钮字体颜色不会改变）。 component.ts 的代码是

let button = document.createElement('button');
button.innerhtml = 'North';
button.setAttribute('class', 'btn');

let element = document.createElement('div');
element.appendChild(button);

而component.css是

.btn

  color: red;

【问题讨论】：

如果您使用 Angular，为什么要这样做 document.createElement('button')？

那么替代方案是什么？

官方教程对Angular进行了很好的介绍angular.io/tutorial

在什么条件下添加按钮？这是一次性的事情，还是你有一系列的事情？您当前的 HTML 是什么？您当前的组件代码是什么？

我正在尝试在我的组件加载后创建它（在“ngOnInit()”函数中）。这是一次性的事情。当前的 html 是空的，因为我只想显示一个按钮。

【参考方案1】：

使用角度组件创建按钮

@Component(
  selector: 'my-app',
  templateUrl: '',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent 
  @ViewChild('element',  read: ViewContainerRef ) container: ViewContainerRef;

  constructor(
    private _componentFactoryResolver: ComponentFactoryResolver,
    private _injector: Injector,
  ) 

  addButton(): void 
    const [componentRef, componentInstance] = this._createButton();
    componentInstance.title = 'North'
    componentInstance.class = 'active'

    this.container.insert(componentRef.hostView);
  

  private _createButton(): [ComponentRef<ButtonComponent>, ButtonComponent] 
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(ButtonComponent);
    const componentRef = componentFactory.create(this._injector)

    const componentInstance = componentRef.instance;

    return [componentRef ,componentInstance];
  

按钮组件

@Component(
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css'],
)
export class ButtonComponent 
  @Input() title: string;
  @Input() class: string = '';

我把整个例子放在stackblitz

【参考方案2】：

请试试这个

button.classList.add("btn");

【讨论】：

这仍然行不通。 component.css 类通过 Angular 应用于 HTML 文件中声明的元素的一些特定于组件的属性来应用自己。通过在 Angular 之外手动创建按钮，不会添加属性，也不会应用 component.css 中的任何类

请在您的答案中添加一些解释，以便其他人学习