angular学习总结十——动态创建组件并实现交互一

ps:看了好多篇动态组件的博客，坑啊，只是放进去一个静态组件，并未加上Input，Output

appModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { DynamicComponent } from './dynamic/dynamic.component';

@NgModule({
  declarations: [
    AppComponent,
    DynamicComponent
  ],
  entryComponents: [DynamicComponent],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

首先动态组件1的实现方式必须在entryComponents中声明

app.component.ts

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic/dynamic.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  username = 'zengwe';
  @ViewChild('content', { read: ViewContainerRef }) content: ViewContainerRef;
  constructor(private componentFactory: ComponentFactoryResolver) {

  }
  add() {
    const component = this.componentFactory.resolveComponentFactory(DynamicComponent);
    component.inputs.push({propName: 'dd', templateName: 'ss'});
    const com = this.content.createComponent(component);
    console.log(com.instance);
    com.instance.dd = 'dd传的值';
    com.instance.out.subscribe((res) => {
      console.log(res);
    });
  }
  remove() {
    this.content.clear();
  }
}

1.com.instance就是向组件中加入数据和订阅Output的事件
this.content.createComponent(component)中的参数中可加入第二个参数id:number
这样可以this.content.remove(id)删除指定的组件

app.component.html

<div>
  <h1>dynamic</h1>
  <div>
    <h2>dynamic container</h2>
    <div #content></div>
  </div>
  <button (click)="add()">add</button>
  <button (click)="remove()">remove</button>
</div>

dynamic.componet.ts

import { Component, OnInit, Input, AfterViewInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-dynamic',
  templateUrl: './dynamic.component.html',
  styleUrls: ['./dynamic.component.css']
})
export class DynamicComponent implements OnInit, AfterViewInit {
  @Input('dd') dd: any;
  @Input('ss') ss: any;
  @Output('out') out = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }
  ngAfterViewInit() {
    console.log(this.dd);
    console.log(this.ss);
    console.log(this);
  }
  outEvent() {
    this.out.emit('outValue');
  }
}

dynamic.component.html

<div class="">
  <span>dynamic componet</span>
  <div>{{dd}}</div>
  <div>{{ss}}</div>
  <button (click)="outEvent($evnet)">click out value</button>
</div>