Как передать компонент в качестве входных данных для другого компонента? - PullRequest
Новая
       27

Как передать компонент в качестве входных данных для другого компонента?

0 голосов
/ 12 апреля 2019

Я использую модальный компонент ngx-bootstraps и хочу динамически передавать его компоненты для отображения.Я не уверен, как это сделать.

Я использую следующий пример, компоненты в качестве содержимого: https://ng -bootstrap.github.io / # / components / modal / examples

Я могу 't передать его с помощью @Input (), поскольку он не является экземпляром переменной. 

import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ActualContentComponent} from 'path/path/path';

//TODO: Fix hard important of a component
@Component({
  selector: 'srd-modal',
  templateUrl: './srd-modal.component.html',
  styleUrls: ['./srd-modal.component.css']
})
export class SharedModalComponent implements OnInit {

  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(ActualContentComponent);
    modalRef.componentInstance.name = 'content';
  }

  ngOnInit() {
  }

}

Приведенный выше пример работает, однако у меня есть жесткая ссылка на ActualContentComponent.Я бы предпочел избегать гигантского переключателя, чтобы увидеть, какой компонент на самом деле открывается (передавая имя компонента).

РЕДАКТИРОВАТЬ: я обнаружил, что на самом деле могу передать компонент с @Input () 

 @Input()
 public component;

 constructor(private modalService: NgbModal) {}

 open() {
    const modalRef = this.modalService.open(this.component);
    modalRef.componentInstance.name = this.buttonTitle;
  }

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

РЕДАКТИРОВАТЬ 2: Я думаю, тип в соответствии с https://angular.io/api/core/Type

1 Ответ

0 голосов
/ 12 апреля 2019

Может быть, вы можете передать тип компонента в метод open?: 

    open(component: Type) {
         const modalRef = this.modalService.open(type);
         modalRef.componentInstance.name = 'content';
    }
...