Если вы используете динамически создаваемые компоненты в Angular, вам, вероятно, сложно передавать информацию между родительским и дочерним компонентами, когда это необходимо. Вам необходимо предоставить информацию в родительском компоненте, а затем внедрить ее в дочерний компонент. Хотя это не обязательно сложно сделать, это приводит к появлению большого количества дополнительного шаблонного кода.  Было бы намного лучше, если бы мы могли просто использовать декоратор   , как мы привыкли. Ну, угадайте, что? Angular поддерживает именно это, начиная с шестнадцатой версии. В этом посте я покажу вам, как это сделать. Хорошо, давайте перейдем к делу. @Input   https://youtu.be/MT2JP8pn1qU?embedable=true  Передача данных старым способом с использованием Angular Injector  Во-первых, давайте посмотрим, как мы раньше передавали данные динамически создаваемым компонентам от родителя. Здесь, в этом примере, в шаблоне компонента у нас есть   , и мы передаем его нашему компоненту проигрывателя. *ngComponentOutlet  В этом случае мы также передаем пользовательский дочерний инжектор, и именно так мы раньше вводили данные для дочернего компонента.  main.ts   @Component({ selector: 'app-root', template: ` <ng-container *ngComponentOutlet="playerComponent; injector: childInjector"></ng-container> ` }) export class App { protected playerComponent = PlayerComponent; }  И чтобы создать этот дочерний инжектор, нам нужно было создать свойство, чтобы его можно было установить и затем использовать в шаблоне.   export class App { protected childInjector?: Injector; ... }  Затем нам нужно было внедрить инжектор из ядра angular в конструктор.   export class App { ... constructor(private injector: Injector) { } }  После этого нам нужно было установить дочерний инжектор, используя метод create и массив провайдеров, чтобы предоставить дочернему токену наш токен игрока.   export class App { ... constructor(private injector: Injector) { this.childInjector = Injector.create({ providers: [ { provide: PlayerToken, useValue: this.player } ], parent: this.injector }); } }  И, наконец, в дочернем компоненте, нашем компоненте player, нам нужно было установить свойство player с помощью метода inject из ядра Angular.  player.comComponent.ts   export class PlayerComponent { protected player?: Player = inject(PlayerToken); }  Итак, все это делается для того, чтобы передать простой объект игрока динамическому компоненту. Я имею в виду, что если бы это не был динамический компонент, мы бы просто сделали его   и просто привязали объект данных игрока к   в родительском элементе. Но это динамически создаваемый компонент, поэтому мы не можем этого сделать, верно? @Input @Input  Что ж, начиная с Angular шестнадцати, мы фактически можем использовать   вместо этого, и это намного проще, чем то, что мы видели до сих пор. @Input  Передача данных по-новому с использованием объекта входов  *ngComponentOutlet  Вместо этого мы начнем с изменения этого свойства player на   . И он просто вводится в интерфейс нашего плеера. @Input  player.comComponent.ts   export class PlayerComponent { @Input() player?: Player; }  Теперь мы можем удалить метод инъекции и импорт токенов игрока, поскольку они больше не нужны. Затем, вернувшись к нашему родительскому элементу, в шаблоне, мы можем удалить инжектор и вместо этого заменить его объектом ввода. Мы можем передать этот объект на любое количество входов. Итак, если бы у нас было пять входных данных, мы бы просто включили их имена, а затем передали каждому необходимые нам данные.  Но в данном случае у нашего дочернего компонента, player, есть только один ввод, так что это все, что нам нужно для его передачи.  main.ts   @Component({ selector: 'app-root', template: ` <ng-container *ngComponentOutlet="playerComponent; inputs: { player }"></ng-container> ` })  Теперь мы можем снять дочерний инжектор. Это означает, что мы также можем вообще удалить конструктор. И, наконец, мы можем удалить инжектор из ядра Angular и импорт токенов игрока, поскольку мы их больше не используем.   export class App { protected player: Player = { name: 'LeBron James', games: 1421, points: 38652, fieldGoalPercentage: 0.505, threePointPercentage: 0.345, imageName: 'lebron-james' }; protected playerComponent = PlayerComponent; }  Вот и все. Мы видим, что все работает так же, как и раньше. Таким образом, это намного проще реализовать и меньше кода, что всегда здорово.  Однако есть один облом: хотя   поддерживаются,   — нет. Какой-то облом, но это то, что есть. Надеюсь, они добавят поддержку в будущем, потому что это тоже будет очень удобно, но нам просто придется подождать и посмотреть. @Input @Output  Хотите увидеть это в действии?  Ознакомьтесь с демонстрационным кодом и примерами этих методов в примере Stackblitz ниже. Если у вас есть какие-либо вопросы или мысли, не стесняйтесь оставлять комментарии.   https://stackblitz.com/edit/stackblitz-starters-9xzkkf?ctl=1&embed=1&file=src%2Fmain.ts&embedable=true

Buy Me a Coffee

Этот звук создан на языке оригинала истории!

Как использовать Angular @Input для передачи данных в динамически создаваемые компоненты

About Author

КОММЕНТАРИИ

БИРКИ

ЭТА СТАТЬЯ БЫЛА ПРЕДСТАВЛЕНА В

Related Stories

Невидимые слои: почему интервью с пользователями являются незаменимым активом

Полное руководство по успешной миграции в облако: стратегии и лучшие практики

Модель Bitcoin UTXO, обеспечивающая работу уникальной экосистемы

Valhalla Флоки станет ассоциированным спонсором индийского тура по Шри-Ланке

Невидимые слои: почему интервью с пользователями являются незаменимым активом

Полное руководство по успешной миграции в облако: стратегии и лучшие практики

Модель Bitcoin UTXO, обеспечивающая работу уникальной экосистемы

Valhalla Флоки станет ассоциированным спонсором индийского тура по Шри-Ланке

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps