Как реагировать на передачу директив/входов ребенку в angular?

В реакции вы можете просто написать это:

<component {...props} />

для передачи атрибутов от родителя к дочернему. Я знаю, что в angular вы можете использовать @Input для получения и передачи данных, но как бы вы обработали динамический список директив для передачи дочернему элементу? Просто для иллюстрации ситуации:

<custom-button [color]="color" [x]="some value" [y]="some other val"/>

И ваша пользовательская кнопка должна передавать все эти входные данные обернутому элементу кнопки в компоненте пользовательской кнопки.


angular input react-props angular6
person Adam Boostani    schedule 21.06.2018    source источник
comment
В Angular вы этого не сделаете. Связано: stackoverflow.com/q/38122124/3001761.   -  person jonrsharpe    schedule 21.06.2018
comment
Так как же составить компоненты, не повторяя каждый отдельный API, который может иметь дочерний компонент?   -  person Adam Boostani    schedule 21.06.2018
comment
Опять же, нет. React и Angular — две совершенно разные вещи с разными целями и философиями.   -  person jonrsharpe    schedule 21.06.2018
comment
@jonrsharpe Я понимаю ограничения типов данных в Angular. Но я бы исследовал это глубже, так как я думаю, что передача vars является таким элементарным аспектом любой слегка сложной программной системы, и в Angular должен быть способ для этого.   -  person Adam Boostani    schedule 22.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

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

Метод, более близкий к функциональности React, состоит в том, чтобы иметь переменную контекста, содержащую все переменные, которые являются общими для родительского и дочернего элементов. Создайте ввод для дочернего элемента, который его принимает, и передайте значение от родителя.

/** context interface */
export interface IComponentXContext {
  color: string;
  x: string;
  y: string;
}

/** parent component */
@Component({
  template: <custom-button context="context" />
})
export class ParentXComponent {
  context: IComponentXContext = { color: 'red', x: 'x', y: 'y' }
}

/** child component */
@Component({
  selector: 'custom-button'
})
export class CustomButtonComponent {
  @Input()
  context: IComponentXContext;
}
person Daniel Gimenez    schedule 21.06.2018
comment
Я вижу, как это работает с вводом, но не с директивой - person roberto tomás; 13.06.2019