Angular 4：ngComponentOutlet - 动态传递数组中的值-Java 学习之路

Plunker：https://plnkr.co/edit/JvXBLOVaeaYO5bmMQa6a?p=preview

在plunker中，我从一个数组ngFor循环生成3个盒子 . 每个盒子都附有一个事件监听器 . 当您单击该框时，我想生成一个组件 . 需要根据数组中指定的组件名生成生成的组件 .

在数组中，我指定应在用户单击的div中加载哪个组件 .

每个div都有一个ng-container，其中应插入生成的组件 .

<ng-container *ngComponentOutlet="items.componentSlider"></ng-container>

目前，如果单击按钮更改组件，它将交换组件

<ng-container *ngComponentOutlet="alert"></ng-container>

但是我想在循环中初始化 .

I would like to generate a component and assign/inject it to the div that I clicked on.

你可以在items数组中看到我得到了2个指定'sliderComponent'的相同组件，所以在循环中我点击时我想生成一个组件，如果两个div对它们有相同的组件 independent .

如何在ngComponentOutlet中动态传递数据，以便加载组件？

@Component({
  selector: 'my-app',
  template: `
    <h1>Angular version 4</h1>


    <div *ngFor="let item of items" (click)="loadComponent(item)">
          <strong> When you click here, 
          I should load the <span style="color:red"> {{item.name}} </span>
          component below</strong> 


          <ng-container *ngComponentOutlet="items.componentSlider"></ng-container>

      

    </div>


    <ng-container *ngComponentOutlet="alert"></ng-container>
    <button (click)="changeComponent()">Change component</button>
  `
})
export class App {
  items:Array<any> = [
    {
      name: 'slider'
      componentSlider: sliderComponent
    },
    {
      name: 'user'
      componentSlider: usersComponent
    },
{
  name: 'slider'
  componentSlider: sliderComponent
},

    ]

  alert = AlertSuccessComponent;
  dynamicComponent = 'xxxxx';

  changeComponent() {
    this.alert = AlertDangerComponent;
  }

  loadComponent(item){
    this.dynamicComponent = item

    this.alert = item.componentSlider

  }
}


@Component({
  selector: 'alert-danger',
  template: `
    <p>Alert danger</p>
  `,
})
export class AlertDangerComponent {

}


@Component({
  selector: 'slider',
  template: `
    <p>slider</p>
  `,
})
export class sliderComponent {

}


@Component({
  selector: 'users',
  template: `
    <p>users</p>
  `,
})
export class usersComponent {

}

1 回答

我正在解决同样的问题 . （二零一七年九月二十〇日）

目前没有使用标准angular4模块的解决方案 .

对我有用的是https://www.npmjs.com/package/ng-dynamic-component .

请运行plunker进行现场演示：https://plnkr.co/edit/uaYuAfki8dkxcRFzO2bN

// our root app component
    import { Component, Input, NgModule, OnInit } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';


    @Component({
      selector: 'my-dynamic-component1', template: `Austria Component [first]  <br>
    <p><strong>transferred 1:</strong> {{context.arg1}}</p>
    <p><strong>transferred 2:</strong> {{context.arg2}}</p>
    ` })
    class Austria {
      @Input() context: any;
    }

    @Component({
      selector: 'my-dynamic-component1', template: `Germany Component [second] <br>
    <p><strong>transferred 1:</strong> {{context.arg1}}</p>
    <p><strong>transferred 2:</strong> {{context.arg2}}</p>
    ` })
    class Germany {
      @Input() context: any;
    }

    @Component({
      selector: 'app-root',
      template: `<ndc-dynamic [ngComponentOutlet]="component"
                              [ndcDynamicInputs]="inputs"
                              ></ndc-dynamic>`
    })
    class MyComponent implements OnInit {
      public component = Austria;
      public currentIteration = 0;
      private inputs = {
        context: {
          arg1: 'value1',
          arg2: 1234567890,
        }
      };
      ngOnInit() {
        this.updateContextValues();
        window.setInterval(()=>{
          this.updateContextValues();
          // switch between the two components
          this.component = (this.component === Austria) ? Germany : Austria;
        }, 1000);
      }
      updateContextValues(){
        this.currentIteration++;
        this.inputs.context.arg1 = 'value' + this.currentIteration;
      }
    }

    import { DynamicModule } from 'ng-dynamic-component';
    @NgModule({
      imports: [ BrowserModule, DynamicModule.withComponents([ Austria, Germany ]) ],
      declarations: [ MyComponent, Austria, Germany ],
      bootstrap: [ MyComponent ]
    })
    export class AppModule { }

回复于 2024-05-03T19:29:54+08:00

Angular 4：ngComponentOutlet - 动态传递数组中的值

1 回答

相关问题