zoukankan      html  css  js  c++  java
  • [Angular] Dynamic component's instance and sorting

    After create a component dynamic, we are able to change the component's props and listen to its event.

      component: ComponentRef<AuthFormComponent>;
    
      ngAfterContentInit() {
        const factory = this.resolver.resolveComponentFactory(AuthFormComponent);this.component = this.entry.createComponent(factory);
        this.component.instance.title = "Create new User";
        this.component.instance.submitted.subscribe(this.loginUser);
      }
    
      loginUser(user: User) {
        console.log('Login', user);
      }

    If we log out 'this.component.instance', we can see:

    And in AuthFormComponent, we have:

    export class AuthFormComponent {
    
      title = 'Login';
    
      @Output() submitted: EventEmitter<User> = new EventEmitter<User>();
    
      onSubmit(value: User) {
        this.submitted.emit(value);
      }
    
    }

    After creating a component dynamicly, we also want to see how to remove the dynamicly created component:

      destroyComponent() {
        if(this.component) {
          this.component.destroy();
        }
      }

    It is really simple, just need to call 'destroy()' api.

    One thing to notice here is that, after we call destroy(), the this.component instance is still there, it won't be removed.

    If you do want to clean it you can use 'onDestroy()' method to clean it:

        this.component.onDestroy(() => {
          delete this.component;
        })

    Reordering the component:

    When you create a component, the default index is '-1'.

    If you set to '0', then it will become first, then 1,2,3...

    If you want to change the order dynamicly, you can do:

      @ViewChild('entry', {read: ViewContainerRef}) entry: ViewContainerRef;
    
      component: ComponentRef<AuthFormComponent>;  
    
    moveFirstToBottom() {
        if(this.component) {
          this.entry.move(this.component.hostView, 1); // move to second place
        }
      }

    import {Component, ViewContainerRef, ViewChild, ComponentFactoryResolver, AfterContentInit, ComponentRef} from '@angular/core';
    
    import { AuthFormComponent } from './auth-form/auth-form.component';
    
    import { User } from './auth-form/auth-form.interface';
    
    @Component({
      selector: 'app-root',
      template: `
        <div>
          <button (click)="destroyComponent()">Destroy</button>
          <button (click)="moveFirstToBottom()">Move first to bottom</button>
          <div #entry>
            <!-- We want to create auth-form component inside this div-->
          </div>
        </div>
      `
    })
    export class AppComponent implements AfterContentInit{
    
      @ViewChild('entry', {read: ViewContainerRef}) entry: ViewContainerRef;
    
      component: ComponentRef<AuthFormComponent>;
    
      constructor(private resolver: ComponentFactoryResolver) {
    
      }
    
      ngAfterContentInit() {
        const factory = this.resolver.resolveComponentFactory(AuthFormComponent);
        this.entry.createComponent(factory);
        this.component = this.entry.createComponent(factory, 0);
        this.component.instance.title = "Create new User";
        this.component.instance.submitted.subscribe(this.loginUser);
        
        this.component.onDestroy(() => {
          delete this.component;
        })
      }
    
      destroyComponent() {
        if(this.component) {
          this.component.destroy();
        }
      }
    
      moveFirstToBottom() {
        if(this.component) {
          this.entry.move(this.component.hostView, 1);
        }
      }
    
      loginUser(user: User) {
        console.log('Login', user);
      }
    
    }
  • 相关阅读:
    PHP的命令行脚本调用
    JAVA使用jar命令制作可执行GUI程序
    PHP的代理模式
    PHP中的__clone()
    PHP使用反射动态加载第三方类
    NAT小记
    JAVA睡眠理发师代码记录
    PHP通过反射获得类源码
    PHP中单引号双引号的区别
    [转载]PHP导出数据库数据字典脚本
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6488255.html
Copyright © 2011-2022 走看看