Вызов метода веб-компонента Angular (CustomElement)

Немного поздно, но если вам это все еще нужно, есть несколько способов заставить его работать.

@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()
}

1. Таким образом, свойство logOptions3 всегда можно использовать для получения options из простого javaScript кода. Но семантически неверно (getter как @Input())
2. Первый logOptions() метод недоступен извне, так как он НЕ помечен @Input()
3. Метод logOptions2() доступен, но может печатать только правильное значение, ЕСЛИ options также отмечен @Input()
4. Но если вы пометите свойство options как @Input(), вы можете получить прямой доступ к нему, а не обертывать его другим методом.
5. Наконец, если вы просто создаете @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' }