Визуализировать экземпляр компонента в Angular? - PullRequest
Новая
       5

Визуализировать экземпляр компонента в Angular?

1 голос
/ 04 марта 2020

Я вручную создал экземпляр класса. Этот класс имеет @Component декоратор. Как мне отрендерить его шаблон? 

@Component({ template: `hello {{ who }}` })
class Greeting {
  constructor (public who: string) { }
}

@Component({ template: `<ng-somehow-render [instance]="greeting"/>` })
class OtherComponent {

  public greeting: Greeting

  constructor () {
    this.greeting = new Greeting('world')
  }

}
  • ComponentFactoryResolver даст мне экземпляр компонента. У меня уже есть экземпляр, и я хочу его визуализировать.
  • ngComponentOutlet внутренне создаст экземпляр. Мой экземпляр тогда бесполезен.

1 Ответ

1 голос
/ 28 апреля 2020

Похоже, вам нужен компонент промежуточного программного обеспечения для визуализации экземпляров других компонентов.

это может быть этот 

@Component({
    selector: 'ng-somehow-render',
    template: '',
})
export class NgSomehowRenderComponent implements OnInit {
    @Input() instance: any;

    constructor (
        private cfr: ComponentFactoryResolver,
        private vcr: ViewContainerRef,
        private cdr: ChangeDetectorRef,
    ) {
    }

    public ngOnInit(): void {
        const componentFactory = this.cfr.resolveComponentFactory(this.instance.constructor);

        this.vcr.clear();
        const componentRef = this.vcr.createComponent(componentFactory);
        for (const key of Object.getOwnPropertyNames(this.instance)) {
            componentRef.instance[key] = this.instance[key];
        }
        this.cdr.detectChanges();
    }
}

Просто добавьте его объявление в ваши модули.

Кстати, компонент Greeting должен быть объявлен в ваших модулях в entryComponents. 

@NgModule({
  declarations: [AppComponent, Greeting, NgSomehowRenderComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [Greeting]
})

Поскольку Angular попытается решить зависимости конструктора, вам нужно добавить декоратор @Optional(). 

@Component({
  template: `hello {{ who }}`
})
export class Greeting {
  constructor(@Optional() public who: string) {}
}

прибыль.

Вы можете посмотреть живую демонстрацию здесь: https://codesandbox.io/s/jolly-villani-32m5w?file= / src / app / app.component.ts

Все вещи из официальное сделать c, так что вы можете использовать его без проблем: https://angular.io/guide/dynamic-component-loader#resolving -компоненты

...