Javascript 在角度组件上从外部角度设置属性

我有一个角分量，如下所示

@Component({
  selector: 'app-data-view',
  templateUrl: './data-view.component.html',
  styleUrls: ['./data-view.component.scss']
})
export class DataViewComponent implements OnInit, OnChanges {
  @Input() data = { val: 1 };
  ...
}

我想从角度之外设置该组件的数据，所以我这样做了

const el = document.querySelector('app-data-view');
console.log(el.data);  // -> undefined
el.data = { val: 2 };  // -> nothing happens

那没用，什么也没发生。唯一有效的方法是使用dispatchEvent和@HostListener。但是我想知道我在上面的示例中是否做错了什么？

您必须得到组件实例，而不是HTML DOM元素 要在控制台中获取组件实例类型，请执行以下操作：

ng.probe(document.querySelector('app-data-view')); // returns Angular Component

请在此处阅读更多信息：

---

除非您编写开发工具，否则不能以这种方式更改角度组件的状态。

您应该尝试使用setAttribute将数据传递给组件。我认为您只能使用setAttribute设置字符串，它应该带有属性为什么要从Angular之外设置值？我正在用StencilJS编写一个web组件库，其中一个组件将包含Angular组件或React或Vue。从我的web组件中，我需要将数据传递给这个接收到的插槽组件