Saya memiliki komponen:

export class PhotoComponent implements OnInit {
 constructor(private foo:Foo[]) { 
      console.log(this.foo);
    }
}

Saya mencoba merender komponen ini secara dinamis dalam Komponen induk seperti di bawah ini:

export class AlbumComponent implements OnInit {

  //_ctr definition and other not relevant code


  dynamicComponent:any = PhotoComponent
  injector:any = createInjector(this.foolist);
  createInjector(foolist) {
    let injector = Injector.create([
      { provide: Foo, useClass: Foo, useValue: foolist, multi:true}
    ], this.injector);
    return injector;
  }
}

Dan di album.component.html:

<ng-container *ngComponentOutlet="dynamicComponent;injector:injector"> </ng-container>

Ini semua berfungsi jika Foo bukan array. Jadi bagaimana saya harus menyuntikkan array?

0
Manish Mishra 19 Maret 2020, 20:07

1 menjawab

Jawaban Terbaik

Saya mampu memecahkan masalah saya.

Konsep:

Jadi pada dasarnya Angular Injector membuat instance dari kelas yang diberikan, tetapi membutuhkan penyedia untuk beri tahu cara membuat kelas itu. Juga, saat melakukannya, Anda dapat menentukan nilai apa yang seharusnya dimiliki. Jadi alih-alih mengharapkan Injector untuk membuat array instance, saya baru saja membuat kelas pembungkus yang lebih besar yang memiliki nilai-nilai saya dan itu berhasil yaitu:

  • membuat pembungkus baru:

    @Injectable()
    export class WrapperClass {
        bar: Bar;
        foo: Foo[]
    }
    
  • dan memperbarui pembuatan Injector seperti di bawah ini:

    createInjector(bar, foo) {
        const wrapper: Wraper = { bar: bar, foo: foo };
        let injector = Injector.create([
          { provide: Wrapper, useClass: Wrapper, useValue: wrapper }
        ], this.injector);
        return injector;
     }
    
  • dan komponen yang diperbarui untuk dirender secara dinamis seperti di bawah ini:

    export class PhotoComponent implements OnInit {
         constructor(private wrapper:Wrapper) { 
              console.log(this.wrapper.foo);
          }
    }
    
0
Manish Mishra 20 Maret 2020, 03:45