Angular Elements：@Input装饰器无法使用变量

问题描述

我有几个分离的Web组件，它们由角形元素制成，我将其导入到一个主要的组件中，该组件具有路由器，是基础应用程序。
路线非常简单：

I have several separated web components, made with angular elements, that I import in a main one, which has a router and is the base application.Routes are pretty simple:

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']);
    }
}

这些组件将执行应做的事情

And the components do the things they are supposed to do.

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声明中丢失了某些内容？

Now when I launch the main app, everything shows as expected, the callback works fine but the variable is undefined.Am I missing something in the @Input declaration in my webcomponents ?

推荐答案

由于使用的是角形元素，因此确保您的变量名使用 smallcaps 之类的格式，因此
@Input（）myvariable：string 而不是 @Input （）myVariable：字符串
在这里检查

Since you are using angular elements, make sure your variable name is in smallcaps like so@Input() myvariable: string and not @Input() myVariable: string check herehttps://github.com/angular/angular/issues/24871

这篇关于Angular Elements：@Input装饰器无法使用变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！