Как я могу добиться композиции компонентов в AngularJS (аналогично шаблону рендеринга реквизита React)? - PullRequest
Новая
       50

Как я могу добиться композиции компонентов в AngularJS (аналогично шаблону рендеринга реквизита React)?

0 голосов
/ 28 декабря 2018

Я пытаюсь создать компонент сетки в AngularJS, в котором элементы сетки предоставляются во время выполнения.(думаю, что рендер реквизит в React).

Я пытаюсь построить это, используя "новый" API компонентов AngularJS вместе с transclusion. 

<grid-items>
   <grid-item-type-1></grid-item-type-1>
</grid-items>


<grid-items>
   <grid-item-type-2></grid-item-type-2>
</grid-items>

Любой из них должен быть действительным.<grid-items> должен позаботиться о данных, а <grod-item-type-x> должен позаботиться о том, как будет казаться каждый отдельный предмет.

Ответы [ 2 ]

0 голосов
/ 05 мая 2019

Ну, если я правильно понял, есть несколько способов сделать это.При определении вашего компонента, например так: 

{
  restrict: 'E',
  bindings: {
    myProp: '@',
  },
  transclude: {
    'myTransclude': 'myTransclude',
  },
  template,
  controller,
  controllerAs: 'ctrl',
}

все, что вы передаете bindings, может быть доступно из вашего компонента.Таким образом, в приведенном выше примере, если вы сделали что-то вроде этого: <my-component my-prop="hey" /> вы также можете получить доступ к ctrl.myProp и получить значение hey.

Более сложным образом вы можете использовать элемент включения, который внутриВ вашем шаблоне myComponent у вас будет что-то вроде этого: 

  <div ng-transclude="myTransclude"></div>

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

<my-component>
    <my-transclude>
        <!-- whatever you wan to go inside your component  -->
    </my-transclude>
</my-component>

И, конечно, вы можете иметьдиректива компиляции HTML (я рекомендую поискать существующие), где вы можете иметь свой шаблон и просто использовать его 

    <div html-compile-directive="ctrl.myTemplate"></div>
0 голосов
/ 04 января 2019

После исследования я нашел два способа сделать это.Одним из них является require родительский контроллер в дочернем компоненте и использование его данных или использование функции ссылки вместе с компиляцией (это не работает с использованием API компонентов), что-то вроде этого: 

link: function(scope, element) {
      scope.items.forEach((item) => {
        const tpl = "<" + item.type + " item=" + item + " ></grid-item>"
        const child = $compile(tpl)(item)
        element.append(child);
      });
    }

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

...