Компонент рендеринга из переменной Angular 9 - PullRequest
Новая
       22

Компонент рендеринга из переменной Angular 9

0 голосов
/ 02 мая 2020

Могу ли я сделать что-то в Angular 9? 

@Component({
    selector: "app-custom",
    template: "<h1>Hey, it's me!</h1>"
})
export class CustomComponent {

}

@Component({
    selector: "app-parent",
    template: "{{ someComponent }}"
})
export class Parent {

    someComponent: CustomComponent;

    constructor() {
        this.someComponent = new CustomComponent();
    }
}

Я хочу визуализировать компонент из переменной.

Это пример кода, в моем коде я получаю "пользовательский компонент "из моего контента и хочу отрендерить его с моими изменениями

1 Ответ

1 голос
/ 02 мая 2020

Вот мое понимание того, что вы пытаетесь сделать.

У вас есть компонент: 

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  public name: string = '';
}

Вы хотите визуализировать этот компонент с помощью переменной. 

@Component({
  selector: "my-app",
  template: "<ng-container #template></ng-container><p>Welcome</p>"
})
export class AppComponent implements OnInit {
  @ViewChild("template", { static: true, read: ViewContainerRef })
  private vcRef: ViewContainerRef;

  private componentType: Type<HelloComponent>;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngOnInit() {
    this.componentType = HelloComponent;

    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
      this.componentType
    );

    const componentRef = this.vcRef.createComponent(componentFactory);
    (<HelloComponent>componentRef.instance).name = "John";
  }
}

Мы используем декоратор @ ViewChild , чтобы найти наш «шаблонный» контейнер, который будет содержать наш компонент, и ссылаться (читать) на него как ViewContainerRef объект. Этот объект даст нам возможность создавать и визуализировать наш компонент.

ComponentFactoryResolver получит фабрику, используемую для создания нашего компонента.

...