TypeScript core.EmbeddedViewRef類代碼示例

 setAttributes(attrs: WormholeAttributes) {
   this.cachedAttrs = attrs;
   if (this.viewRef && attrs && typeof attrs === 'object') {
     Object.assign(this.viewRef.context, attrs);
     this.viewRef.markForCheck();
   }
 }

  @Input() set ifLoader(loading: boolean) {
    console.log('ifLoader, loading : ', loading);

    if (loading) {
      // create and attach a loader to our viewContainer
      const factory = this.cfResolver.resolveComponentFactory(LoaderSpinnerComponent);
      this.loaderComponentRef = this.viewContainer.createComponent(factory);

      // remove any embedded view
      if (this.embeddedViewRef) {
        this.embeddedViewRef.destroy();
        this.embeddedViewRef = null;
      }
    } else {

      // remove any loader
      if (this.loaderComponentRef) {
        this.loaderComponentRef.destroy();
        this.loaderComponentRef = null;
      }

      // create and attach our embeddedView
      this.embeddedViewRef = this.viewContainer.createEmbeddedView(this.templateRef);
    }
  }

  connect(attrs?: WormholeAttributes, events?: string[], index?: number): Observable<WormholeEvent> {
    if (typeof attrs === 'object' && attrs) {
      this.cachedAttrs = attrs;
    }

    this.disconnect();
    this.viewRef = this.attach(this.templateRef, index);

    this.viewRef.onDestroy(() => {
      this.viewRef = undefined;
    });

    if (this.cachedAttrs && typeof this.cachedAttrs === 'object') {
      Object.assign(this.viewRef.context, this.cachedAttrs);
    }
    this.viewRef.detectChanges();
    return NEVER;
  }

	// ---
	// PUBLIC METHODS.
	// ---

	// I get called when any of the input bindings are updated.
	public ngOnChanges( changes: SimpleChanges ) : void {

		// NOTE: Since this Directive uses an ATTRIBUTE-BASED SELECTOR, we know that the
		// ngOnChanges() life-cycle method will be called AT LEAST ONCE. As such, we can
		// be confident that the embedded view will be marked for changes at least once.
		// --
		// We also want to check the view for changes any time the input-binding is
		// changed. This gives the calling context a chance to drive changes based on a
		// single expression even when change-detection is limited.
		this.embeddedViewRef.detectChanges();

	}

	// I initialize the bind-once directive.
	constructor(
		templateRef: TemplateRef<void>,
		viewContainerRef: ViewContainerRef
		) {

		this.embeddedViewRef = viewContainerRef.createEmbeddedView( templateRef );
		// Since we want manual control over when the content of the view is checked,
		// let's immediately detach the view. This removes it from the change-detection
		// tree. Now, it will only be checked when we either re-attach it to the change-
		// detection tree or we explicitly call .detectChanges() (see ngOnChanges()).
		this.embeddedViewRef.detach();

	}

  ngOnChanges(changes: { [key: string]: SimpleChange }) {
    if (changes['templateWrapper']) {
      if (this.embeddedViewRef) {
        this.embeddedViewRef.destroy();
      }

      this.embeddedViewRef = this.viewContainer.createEmbeddedView(
        this.templateWrapper, {
          value: this.value,
          row: this.row,
          column: this.column
        });
    }

    if (this.embeddedViewRef) {
      this.embeddedViewRef.context.value = this.value;
      this.embeddedViewRef.context.row = this.row;
      this.embeddedViewRef.context.column = this.column;
    }
  }

    ngOnDestroy() {
		this.view.destroy();
	}