angular中的viewContainerRef使用

viewContainerRef表示可以将一个或多个视图附着到组件中的容器

//指令定义
@Directive({
  selector: '[appDynamicComponent]'
})
export class DynamicComponentDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

<ng-template appDynamicComponent></ng-template>
@ViewChild(DynamicComponentDirective) componentHost: DynamicComponentDirective | undefined;

length :报告目前附加到本容器的视图的数量
console.log(this.componentHost.viewContainerRef.length)

clear :销毁本容器中的所有视图 无返回值 无参数
this.componentHost.viewContainerRef.clear()

get :从该容器中获取一个视图 参数为获取视图从0开始的索引 返回值为ViewRef实例，如果索引超过范围则为0
let ViewRef = this.componentHost.viewContainerRef.get(index);

createEmbeddView() 实例化内嵌视图，并把它插入到该容器中 返回值为新创建的这个视图viewRef实例

<ng-template #tpl>
  <span>测试插入</span>
</ng-template>

 @ViewChild('tpl') tpl: TemplateRef<any> | undefined
 this.componentHost.viewContainerRef.createEmbeddedView(this.tpl);

createComponent() 实例化一个component，并把它的宿主视图插入到本容器的指定index处
参数componentType:要使用的组件类型
options:包含额外参数的对象{
index:将新组件的宿主视图插入此容器的索引。如果未指定，则将新视图附加到最后一个条目
injector:用作新组件父级的注入器
ngModuleRef：
projectableNoes
}
返回值 为ComponentRef

insert() 把一个视图插到当前容器中
参数：viewRef 要插入的视图
index number 从0开始的索引，表示该视图要插入当前视图的哪个位置，如果没有指定，则加到最后
默认为undefined

move()把一个视图移到容器的新位置
viewRef 要移动的视图
currentIndex 要移动到的下标
返回值为移动后的viewRef实例

indexOf 返回某个视图在当前容器的索引
viewRef 要查询的视图
如果没找到则返回-1

remove() 销毁在容器上的某个视图
index 销毁该索引的视图 如果不写，则销毁最后一个视图

detach() 从当前容器中分离某个视图，但不会销毁，和insert配合使用，对视图进行移动
index 索引

export declare abstract class ViewContainerRef {
    /**
     * Anchor element that specifies the location of this container in the containing view.
     * Each view container can have only one anchor element, and each anchor element
     * can have only a single view container.
     *
     * Root elements of views attached to this container become siblings of the anchor element in
     * the rendered view.
     *
     * Access the `ViewContainerRef` of an element by placing a `Directive` injected
     * with `ViewContainerRef` on the element, or use a `ViewChild` query.
     *
     * <!-- TODO: rename to anchorElement -->
     */
    abstract get element(): ElementRef;
    /**
     * The [dependency injector](guide/glossary#injector) for this view container.
     */
    abstract get injector(): Injector;
    /** @deprecated No replacement */
    abstract get parentInjector(): Injector;
    /**
     * Destroys all views in this container.
     */
    abstract clear(): void;
    /**
     * Retrieves a view from this container.
     * @param index The 0-based index of the view to retrieve.
     * @returns The `ViewRef` instance, or null if the index is out of range.
     */
    abstract get(index: number): ViewRef | null;
    /**
     * Reports how many views are currently attached to this container.
     * @returns The number of views.
     */
    abstract get length(): number;
    /**
     * Instantiates an embedded view and inserts it
     * into this container.
     * @param templateRef The HTML template that defines the view.
     * @param context The data-binding context of the embedded view, as declared
     * in the `<ng-template>` usage.
     * @param index The 0-based index at which to insert the new view into this container.
     * If not specified, appends the new view as the last entry.
     *
     * @returns The `ViewRef` instance for the newly created view.
     */
    abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C>;
    /**
     * Instantiates a single component and inserts its host view into this container.
     *
     * @param componentFactory The factory to use.
     * @param index The index at which to insert the new component's host view into this container.
     * If not specified, appends the new view as the last entry.
     * @param injector The injector to use as the parent for the new component.
     * @param projectableNodes
     * @param ngModule
     *
     * @returns The new component instance, containing the host view.
     *
     */
    abstract createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>;
    /**
     * Inserts a view into this container.
     * @param viewRef The view to insert.
     * @param index The 0-based index at which to insert the view.
     * If not specified, appends the new view as the last entry.
     * @returns The inserted `ViewRef` instance.
     *
     */
    abstract insert(viewRef: ViewRef, index?: number): ViewRef;
    /**
     * Moves a view to a new location in this container.
     * @param viewRef The view to move.
     * @param index The 0-based index of the new location.
     * @returns The moved `ViewRef` instance.
     */
    abstract move(viewRef: ViewRef, currentIndex: number): ViewRef;
    /**
     * Returns the index of a view within the current container.
     * @param viewRef The view to query.
     * @returns The 0-based index of the view's position in this container,
     * or `-1` if this container doesn't contain the view.
     */
    abstract indexOf(viewRef: ViewRef): number;
    /**
     * Destroys a view attached to this container
     * @param index The 0-based index of the view to destroy.
     * If not specified, the last view in the container is removed.
     */
    abstract remove(index?: number): void;
    /**
     * Detaches a view from this container without destroying it.
     * Use along with `insert()` to move a view within the current container.
     * @param index The 0-based index of the view to detach.
     * If not specified, the last view in the container is detached.
     */
    abstract detach(index?: number): ViewRef | null;
}