angular - 调用 Angular Web 组件方法(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 中返回错误:document.querySelector(...).logOptions is not a function在示例 2 中返回: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属性始终可用于获取 options来自平原 javaScript代码。但语义上不正确(a getter 为 @Input() )

第一logOptions()方法无法从外部访问，因为它没有标记 @Input()

logOptions2()方法是可访问的，但只能打印正确的值 IF options还标有@Input()

但是如果你标记 options属性为 @Input() ，您可以直接访问它本身，而不是将其包装在另一种方法中

最后，如果你只是让 @Input() options = false ，您还可以将其作为来自 HTML 的简单属性进行访问。还有

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

更新
如果你想将数据传递到组件中，你可以简单地暴露一个 setter与 @Input 的属性(property).然后您可以从组件外部设置该值，使用 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' }