Я создаю модальный компонент в Angular 2 (и TypeScript), который будет иметь разные представления / страницы. У него не будет вкладок, но концепция очень похожа. В основном я изо всех сил пытаюсь найти подход к этому.

В моем модальном компоненте я хочу выводить разные представления / страницы. Каждый из них должен быть самим компонентом, потому что у них нет общей разметки. Кроме того, они будут получать данные из классов обслуживания, поэтому мне нужно написать конкретную логику для каждого представления.

В основном я хочу что-то вроде:

// Within my modal component's template
<div *ngFor="#view of views">
    // Render view component here
</div>

Где views может быть, например, массивом компонентов. Моя первая и основная проблема заключается в том, что я не уверен, как вывести коллекцию моих представлений (компонентов).

Как я могу вывести набор компонентов в другой компонент?

Кроме того, мне нужен способ скрывать и отображать представления, а это единственное, что у них общего. Я думал добавить переменную isActive к представлениям и на основе этого отображать / скрывать их. Будет ли плохой практикой для компонентов представлений либо реализовывать интерфейс ModalView, либо расширять базовый класс для добавления этой логики? В моем модальном компоненте я хочу иметь возможность контролировать, какое представление отображается, поэтому мне нужно, чтобы представления имели общую логику.

Надеюсь, мне ясно, чем я хочу заниматься. Решение может быть простым, но сейчас я немного не понимаю, как это сделать. Будем очень признательны за пример кода!

7
ba0708 22 Фев 2016 в 22:55

2 ответа

Лучший ответ

Вы можете создать «фабрику компонентов» как директиву, которая загружает соответствующие компоненты, используя DynamicComponentLoader на основе параметров, которые вы передаете из своего модального окна.

<component-factory *ngFor="#view of views" 
    (loaded)="addComponent($event)"
    [name]="view.name" 
    [visible]="view.visible"></component-factory>

@Directive({ selector: 'component-factory' })
class ComponentFactory {
  @Input() name;
  @Input() visible;
  @Output() loaded = new EventEmitter();
  constructor(
    private _dcl: DynamicComponentLoader, 
    private _eref: ElementRef) {

  // import OneCmp, TwoCmp in this file...
  private components: { one: OneCmp, two: TwoCmp }

  ngOnInit() {
    this._dcl.loadNextToLocation(
      this.components[this.name], 
      this._eref)
      // pass values to the loaded components
      // and send it's instance to the parent
      .then((ref: ComponentRef) => {
        ref.instance.visible = this.visible;
        this.loaded.emit(ref.instance)
      });
  }
}
5
Sasxa 23 Фев 2016 в 06:03

Шаблон динамического рендеринга Angular2

import { Component, View, DynamicComponentLoader, ElementRef} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'

@Component({
    selector: 'some-component',
    properties: ['greeting'],
    template: `
    <b>{{ greeting }}</b>
  `
})
class SomeComponent { }




@Component({
    selector: 'app'
})
@View({
    template: `
    <h1>Before container</h1>
    <div #container></div>
    <h2>After container</h2>
  `
})
class App {
    loader: DynamicComponentLoader;
    elementRef: ElementRef;

    constructor(loader: DynamicComponentLoader, elementRef: ElementRef) {
    this.laoder = loader;
    this.elementRef = elementRef;

    // Some async action (maybe ajax response with html in it)
    setTimeout(() => this.renderTemplate(`
      <div>
    <h2>Hello</h2>
    <some-component greeting="Oh, hey"></some-component>
      </div>

Полный код: https://github.com/guyoung/GyPractice-Angular2Advanced/ tree / master / apps / dynamic_render_template

1
guyoung 23 Фев 2016 в 02:24