Передача данных в веб-компонент Angular

Question

Я пытаюсь написать веб-компоненты на Angular, и я не могу понять, как передавать данные в компонент.

<my-component someId="1234"></my-component>

Я надеялся найти способ реализовать это и получить someIdв моем угловом компоненте.Возможно ли реализовать это или я должен пытаться использовать слоты?Просто чтобы прояснить, я спрашиваю, как сделать веб-компоненты, использующие угловые ненормальные угловые компоненты.

Answer 1

Вам необходимо использовать переменную @Input (), объявленную в вашем совместно используемом компоненте.

export class MyComponent {
 @Input() someId: string = '1234';//default value
}

// HTML

<my-component someId="1234"></my-component>

"someId" - это необязательный входной параметр, который может бытьтакже игнорируется.

РЕДАКТИРОВАТЬ: в случае, когда вы привязываете некоторую постоянную строку или число к входу, это не должно быть указано в квадратных скобках.Вы можете использовать тот же синтаксис, что и обычный атрибут html.

Answer 2

Вы должны использовать привязку данных от Angular

<my-component [id]="1234"></my-component>

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

export class MyComponent {
  @Input('id') id: string;
}