Эквивалент AngularJS Component require свойство в Angular Component - PullRequest
0 голосов
/ 30 ноября 2018

Я обновляю большое приложение Angular 1.6, и у нас есть ряд компонентов, которые используют 'require', чтобы получить доступ к контроллеру родительского компонента.Компонент AngularJS выглядит следующим образом:

 var tileTextbox = {
        template: '<ignore>',
        controller: TileTextboxController,
        bindings: {
            field: '<',
            notifyError: '&',
            context: '<',
            onRemoteFieldAction: '&',
            onChange: '&'
        },
        require: {
            formsCtrl: '^gsForm' ----> What should this be replaced with in Angular component?
        }
    };

Я обнаружил @ViewChild, который предоставляет родительский доступ для Child, но я ищу другой путь.Я знаю, что мы могли бы реорганизовать использование какого-либо общего сервиса, но сейчас я просто ищу минимальный рефакторинг.Из документации Angular @ https://angular.io/guide/upgrade похоже, что ваш компонент может использовать 'require', но просто не знаю, как

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

require эквивалент в угловом выражении Host.Вы можете использовать декоратор Host для получения экземпляра родительского компонента.Для этого вы должны упомянуть имя родительского компонента / директивы / службы внутри констурктора дочернего компонента.

constructor(@Host() private gsForm: GsForm) {
   //here you will have access to parent directive gsForm
}
0 голосов
/ 30 ноября 2018

С AngularJS Docs :

Межкомпонентная связь

Директивы могут требовать контроллеров других директиввключить связь друг с другом.Это может быть достигнуто в компоненте путем предоставления сопоставления объектов для свойства require.Ключи объекта указывают имена свойств, под которыми требуемые контроллеры (значения объектов) будут связаны с контроллером требуемого компонента.

По сути, это необходимо для обмена данными между двумя компонентами.Есть несколько способов сделать это в Angular.

  1. Вы можете создать SharedService и внедрить его в оба угловых компонента.Устанавливать данные из одного компонента и извлекать данные из другого.
  2. Вы можете использовать @Input свойства для передачи данных от Родителя к потомку.
  3. Вы можете использовать @Output свойства для передачи данных изДочерний к родителю.

Существует много других способов обмена данными между родительским и дочерним компонентами.ViewChild и т.д., например.Но вышеприведенные три являются самыми прямыми способами.

...