关于angular：从Component获取ViewContainerRef


Get ViewContainerRef from Component

我想在角度4中创建嵌套组件

这是选择器组件

1
2
3
4
5
6
7
import {InputComponent} from './input/input.component'
import {BlockComponent} from './block/block.component'

export const FormChooser = {
  Block: BlockComponent,
  Input: InputComponent
}

这是组件构建器

1
2
3
4
const component = FormChooser[data.component]
const factory = this.Resolver.resolveComponentFactory(component)

const new_component = this.ViewContainerRef.createComponent(factory)

如何获取new_component ViewContainerRef？ 所以我可以使用这样的代码

1
const another_new_component = new_component.createComponent(factory) // as ViewContainerRef

谢谢...

相关讨论

您可以在动态组件的构造函数中注入ViewContainer

1
2
3
4
5
6
7
8
class BlockComponent {
  constructor(public vcRef: ViewContainerRef) {}
}

const factory = this.Resolver.resolveComponentFactory(BlockComponent)

const newComponentRef = this.ViewContainerRef.createComponent(factory);
const newComponentVcRef = newComponentRef.instance.vcRef;

或使用@ViewChild获取对ViewContainerRef的引用

1
2
3
4
5
6
7
8
9
10
 template: '<ng-container #ref></ng-container>'
})
class BlockComponent {
  @ViewChild('ref') vcRef: ViewContainerRef;
}

const factory = this.Resolver.resolveComponentFactory(BlockComponent )

const newComponentRef = this.ViewContainerRef.createComponent(factory);
const newComponentVcRef = newComponentRef.instance.vcRef;
相关讨论

对于角度+8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { InputNumberComponent } from '../input-number/input-number.component';
@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.scss']
})
export class DynamicFormComponent implements OnInit {

  @ViewChild('ref', { read: ViewContainerRef }) vcRef: ViewContainerRef;
  constructor(private resolver: ComponentFactoryResolver) { }

  ngOnInit() {
    const comp = this.resolver.resolveComponentFactory(InputNumberComponent)
    this.vcRef.createComponent(comp)
  }

}