Angular 元素 : @Input decorator not working with variables

Question

我有几个独立的 Web 组件，由 angular 元素组成，我将它们导入到一个主组件中，该组件有一个路由器并且是基本应用程序。
路线非常简单:

import { Component } from '@angular/core';
import { Router } from "@angular/router";

@Component({
    selector: 'example',
    template: '<component-one [variable]="toPass" (callback)="onCallback($event)"></component-one>',
    styles: []
})
export class ExampleComponent {
    public toPass: string = "Hello World!";

    constructor(private router: Router) {}

    onCallback(event) {
        console.log(event);
        this.router.navigate(['example-two']);
    }
}

组件做他们应该做的事情。

import { Component, Input, OnInit } from '@angular/core';

@Component({
    selector: "component-one",
    templateUrl: "./component-one.html",
    styleUrls: ["./component-one.scss"],
    encapsulation: ViewEncapsulation.Emulated,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ComponentOne implements OnInit {
    @Input() variable: string;
    @Output() callback = new EventEmitter<any>();

    constructor() {}

    ngOnInit() {
        console.log("Variable: ", this.variable);
    }

    someRandomButtonClicked() {
        callback.emit({ data: "Callback Called" });
    }
}

现在，当我启动主应用程序时，一切都按预期显示，回调工作正常，但变量未定义。
我在 webcomponents 的 @Input 声明中遗漏了什么吗？

Answer 1

由于您使用的是 Angular 元素，请确保您的变量名称在 中。小型股像这样@Input() myvariable: string而不是 @Input() myVariable: string 在这里检查
https://github.com/angular/angular/issues/24871