Я работаю над примером приложения Angular 2, в котором корневой компонент имеет 4 родственных компонента.

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

Допустим, корневой компонент содержит компоненты sibling1Component, sibling2Component, sibling3Component и sibling4Component.

Я хотел бы, чтобы родственные компоненты были созданы в следующем порядке

«sibling2Component», «sibling4Component», «sibling1Component», «sibling3Component».

Надеюсь, мой вопрос имеет смысл.

3
refactor 1 Июл 2017 в 09:12
Под созданием вы имеете в виду, когда вызывается функция-конструктор, не так ли?
 – 
Dhyey
1 Июл 2017 в 09:23
Да, это правильно
 – 
refactor
1 Июл 2017 в 09:25
Как должен выглядеть результирующий html? и вы создаете компоненты динамически?
 – 
Max Koretskyi
1 Июл 2017 в 10:16
Компоненты не создаются динамически .... и теги родственных компонентов не могут быть размещены в требуемой последовательности порядка создания
 – 
refactor
1 Июл 2017 в 10:21
2
То, как сказал Дайи, это невозможно, компилятор создает фабрику, используя порядок, в котором компоненты появляются в tempalte
 – 
Max Koretskyi
1 Июл 2017 в 10:25

1 ответ

Лучший ответ

constructor вызывается в зависимости от того, когда вызывается компонент, т.е. компонент, который должен быть отрисован первым, будет инициализирован первым.

Например:

HTML код:

<div class="root-comp">
    <sibling2Component></sibling2Component>
    <sibling1Component></sibling1Component>
</div>

В приведенном выше коде сначала будет вызываться метод constructor для sibling2Component, а затем будет вызван sibling1Component. Порядок в массиве declarations NgModule не имеет значения.

Я сделал plnkr, чтобы продемонстрировать это, где <third-comp></third-comp> первым вызывается, хотя он был добавлен в конец массива declarations.

Итак, в основном вот как должен выглядеть ваш HTML:

<div class="root-comp">
    <sibling2Component></sibling2Component>
    <sibling4Component></sibling4Component>
    <sibling2Component></sibling2Component>
    <sibling3Component></sibling3Component>
</div>
5
Dhyey 1 Июл 2017 в 09:37