Загрузка динамических компонентов в определенном месте в Angular2

Я разрабатываю новое приложение в Angular2, и у меня есть требование, когда мне нужно динамически загружать около 8 элементов управления (сетка, диаграммы, календари и т. д.) в моем приложении. Я могу динамически загружать все эти элементы управления. Но мое требование состоит в том, чтобы отображать их особым образом, например, два элемента управления в строке, что я не могу сделать. В настоящее время все элементы управления загружены, но все в одном столбце один под другим.

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

   for (let gadget of gadgets) {
                        this.userService.getGadgetsData(gadget.Id).subscribe(gadgetsData => {

                            switch (gadget.Name) {
                                case "PieChart":

                                    this.donughtChartData = gadgetsData.Data.Issues.map((v: any) => ({
                                        category: v.Values[0].Value,
                                        value: v.Values[2].Value,
                                    }));

                                    const factory = this.componentFactoryResolver.resolveComponentFactory(DonutComponent);
                                    const ref = this.viewContainerRef.createComponent(factory);
                                    ref.instance.donutchartData = this.donughtChartData;
                                    ref.changeDetectorRef.detectChanges();

                                    break;

angular angular-template
person indra257    schedule 16.03.2017    source источник
comment
Покажите нам, что вы уже сделали, чтобы мы могли вам помочь   -  person YounesM    schedule 17.03.2017
comment
Я обновил вопрос с некоторым кодом. Здесь я могу динамически получать все компоненты и отображать их. Но не мог контролировать, как они могут отображаться. как два элемента управления в строке.   -  person indra257    schedule 17.03.2017
comment
Как насчет вашего шаблона?   -  person YounesM    schedule 17.03.2017
comment
Вы имеете в виду шаблон управления?   -  person indra257    schedule 17.03.2017
comment
Шаблон вашего компонента   -  person YounesM    schedule 17.03.2017
comment
Шаблон компонента загрузчика пуст. То есть очень я заблокирован. Поскольку он пуст, компоненты загрузчика отображают все динамические компоненты один за другим. Я не уверен, как управлять отображением динамических компонентов.   -  person indra257    schedule 17.03.2017

Ответы (1)


arrow_upward
0
arrow_downward

Основываясь на том, что вы сказали, я думаю так: вам нужно отобразить содержимое put в файле template/.html. ваш машинописный текст будет работать нормально, но негде посмотреть. используйте div или что-то в своем шаблоне и отобразите этот результат.

как только он отобразится, вы можете присвоить этому div имя класса, например, class='flex-box', и применить приведенные ниже стили. Они автоматически выровняют их по столбцам, и это очень легко понять; просто дайте ссылку прочитать.

Вы хотите использовать flex для достижения столбцов

пример здесь:

`ul{
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
     li{
      flex: 6 1 ; //the number refer to how much/fast the item will grow/shrink
       .form-control-item {//...some css}
      }
    }`

ЕСЛИ ваш вопрос теперь превращается в «Как мне использовать шаблон», тогда вам нужно взглянуть на другие вопросы о переполнении стека, поскольку на них уже много раз давались ответы. вы также можете обратиться к документации по angular и взять учебное пособие.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

person James Warren    schedule 16.03.2017
comment
Я обновил вопрос, указав часть своего кода. Итак, здесь я могу получить элементы управления/компоненты и загрузить их в другой компонент. Но я не мог контролировать расположение отображения этих компонентов в компоненте загрузчика. - person indra257; 17.03.2017
comment
загрузите их в этот шаблон компонентов и используйте flex box для получения столбцов. - person James Warren; 17.03.2017
comment
Здесь, основываясь на вашем предложении, я мог бы загрузить компоненты один за другим. Но в моем случае я создаю динамический компонент и знаю расположение строки/столбца, в которое я должен вставить этот компонент. В общем, у меня есть набор динамических компонентов с известным расположением строки/столбца. Мне нужно отобразить их на моей странице. - person indra257; 20.03.2017