要将变量值用作DOM元素类型，可以使用Angular的动态组件。

首先，在Angular组件中定义一个变量来保存要动态创建的组件类型。可以使用TypeScript的Type类型来指定变量类型，例如：

import { Component, ComponentFactoryResolver, Type, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app',
  template: `
    
  `
})
export class AppComponent {
  // 定义要动态创建的组件类型
  componentType: Type = DynamicComponent;

  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngOnInit() {
    this.createComponent();
  }

  createComponent() {
    // 使用组件工厂解析器创建组件工厂
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.componentType);
    
    // 使用容器视图引用来创建组件实例
    const componentRef = this.container.createComponent(componentFactory);
    
    // 可以通过componentRef.instance访问动态创建的组件实例，并传递变量值给组件
    componentRef.instance.variable = 'Hello, World!';
  }
}

然后，在DynamicComponent组件中接收传递的变量值，并在模板中使用它作为DOM元素类型。例如：

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

@Component({
  selector: 'dynamic-component',
  template: `
    
{{ variable }}
    

      
This is a div element.
      This is a span element.
      
This is a p element.
    
  `
})
export class DynamicComponent {
  @Input() variable: string;
}

在上面的示例中，AppComponent中的componentType变量被设置为DynamicComponent，然后在createComponent方法中使用组件工厂解析器创建DynamicComponent的实例，并将变量值传递给它。在DynamicComponent中，可以使用ngSwitch指令根据变量值动态渲染不同的DOM元素类型。

最后，在AppComponent的模板中使用ng-container和ViewChild来获取容器视图引用，并将动态创建的组件放置在该容器中。

这样，当AppComponent组件初始化时，DynamicComponent将根据传递的变量值动态创建并显示相应的DOM元素类型。