如何以角度绑定和更改动态组件输入？

Question

I have a dynamic component an app component. I am dynamically compile the dynamic component and add to app component.

@Component({
  selector: 'app-dynamic',
  template: `<p>Dynamic Component {{ index }}</p>`
})
export class DynamicComponent {

  @Input() index: number;

} 

And app component:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';

  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  counter = 1;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {

  }

  ngOnInit(){
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);

    const componentRef = this.container.createComponent(componentFactory);

    componentRef.instance.index = this.counter++;
  }

  add(){
    this.counter++;
  }

}

But after start the applicaiton, I am increasing the counter . But it does not change in dynamic component. Why?

Answer 1

I think you can't pass a counter by reference so you can do :

export class AppComponent implements OnInit {
  name = 'Angular';

  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  counter = 1;
  componentRef: DynamicComponent;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {

  }

  ngOnInit(){
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);

    this.componentRef = this.container.createComponent(componentFactory);

    this.componentRef.instance.index = this.counter++;
  }

  add(){
    this.componentRef.instance.index = this.counter++;
  }

}

Maybe this can work if you can tell me ;)

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';

  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  counter = 1;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {

  }

  ngOnInit(){
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);

    const componentRef = this.container.createComponent(componentFactory);

    componentRef.instance.index = this.counter;
  }

  add(){
    this.counter++;
  }

}