调用 Angular 网络组件方法 (CustomElement)

Question

我有这两个例子：

示例 1：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  options:any = {isOpen: false };

  logOptions() {
    console.log(this.options);
  }

}

示例 2：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  options:any = {isOpen: false };

  @Input() logOptions() {
    console.log(this.options);
  }

}

在html中：

<app-root></app-root>

<script>
  document.querySelector('app-root').logOptions();
</script>

示例 1 returns 错误：document.querySelector(...).logOptions is not a function

在示例 2 returns 中：undefined

有没有人有什么想法？

Answer 1

有点晚了，但如果您仍然需要它，有几种方法可以让它发挥作用。

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent {

    // @Input() << see comments below
    options: any = {isOpen: false };
    
    // This will NOT be available outside the component, in plain JS
    logOptions() {
        console.log(this.options);
    }

    // This will work ONLY if options is @Input()
    @Input()
    logOptions2() {
        console.log(this.options);
    }
    
    // This property will always provide correct data
    // Ideally a getter should not be @Input() though
    @Input()
    get logOptions3() {
        return this.options;
    }
}

您可以使用普通 JavaScript 代码访问它们，如

const logComponentOptions = () => {
    const el = document.querySelector('app-root');
    // el.logOptions(); << Error
    el.logOptions2(); // works ONLY if options is @Input()
    console.log(el.logOptions3); // WORKS
    console.log(el.options); // if options is @Input()
}

因此 logOptions3 属性始终可用于从纯 javaScript 代码中获取 options。但语义上不正确（getter 为 @Input()）
第一个 logOptions() 方法无法从外部访问，因为它未标记 @Input()
logOptions2() 方法可以访问，但只能打印正确的值如果 options 也被标记为 @Input()
但是如果你将 options 属性标记为 @Input()，你可以直接访问它本身，而不是用另一个方法包装它
最后，如果您只是制作 @Input() options = false，您也可以从 HTML 中将其作为简单属性访问

<app-root options="false"></app-root>

更新

如果你想将数据传递到组件中，你可以简单地暴露一个 setter 属性和 @Input。然后你可以从组件外部设置值， JavaScript

@Input()
public set myData(value: MyDataType) {
    // validation & logic if any
    this._myData = value;
}

// Then in JavaScript
const el = document.querySelector('app-root');
el.myData = {a: 10, b: true, c: 'my data object' }

调用 Angular 网络组件方法 (CustomElement)

Call Angular web component method (CustomElement)

web-component

angular

angular-elements

更新