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

Question

我正在创建一个按钮并在 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;
}

Answer 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

Answer 2

请试试这个

button.classList.add("btn");