Как передать любой массив из обычной страницы html в веб-компонент angular

Question

У меня есть веб-компонент angular, интегрированный в обычную страницу html. Я хочу передать массив данных, который находится на моей html странице, моему веб-компоненту.

    <script>
window.onload = function() {
  var myArray = [{value: 'aa', name: 'aaa'}, {value: 'bb', name:'bbb'}];
};</script>

теперь я хочу передать «myArray» моему angular веб-компоненту.

я сделал вот так. <someComponent [passdata]="myArray"></someComponent>

теперь на моей странице component.ts я сделал

@ Input () passdata: string;

и в ngOnInit у меня есть консольные данные passdata, но я не понимаю. Я новичок в веб-компонентах angular, если я сделал что-то не так, пожалуйста, помогите мне.

Answer 1

Дочерний компонент инициализируется до того, как свойства Input будут заполнены значением. Следовательно, вы не получаете значение в ngOnInit.

Если вы хотите использовать значение только в файле шаблона, вы можете напрямую получить его с помощью @Input () следующим образом -

 @Input() name: string;

и использовать его непосредственно в файле html, например this -

<h1>Hello {{name}}!</h1> 

Однако, если вы хотите получить значение Input в ngOnInit, вы можете использовать такой метод set -

@Input()
  set myArray(value) {
    if(value) {
      this.array = value;
    }
  }

Здесь сначала проверяется, не является ли значение null / undefined , затем он присваивает значение некоторой локальной переменной, которая может использоваться в самом компоненте.

Здесь вы можете увидеть работающий пример - InputExample (проверьте консоль, чтобы увидеть результат)

Answer 2

родительский компонент. html

<child-component [myArray]="myArray"></child-component>

parent component.ts

public myArray = [{value: 'aa', name: 'aaa'}, {value: 'bb', name:'bbb'}];

child component.ts

@input() myArray;

ngOnChanges(){ console.log(myArray); }

Ссылка на пример ввода stackblitz