Angular Elements：@Input 装饰器不适用于变量

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

由于您使用的是角度元素，因此请确保您的变量名称在 smallcaps 中，如下所示 @Input() myvariable: string 而不是 @Input() myVariable: string 在这里检查 https://github.com/angular/angular/issues/24871

Answer 2

我想你只是错过了理解新语法:)

当你在输入名称周围使用 [] 时，你告诉 Angular 你给了他一个变量。如果您不使用它，您可以要求 Angular 将其作为原始类型。

所以：

<component-one [variable]="myVar"   

必须在组件中定义一个名为“myVar”的变量

没有

<component-one variable="myVar" 

Angular 会将“myVar”作为字符串值

无用但有效：

<component-one [variable]="'myVar'"

你给一个新的字符串作为变量

Answer 3

您可以在 ComponentOne 中启动变量。然后它应该工作

@Input() variable:String = “”;

Answer 4

我认为这就是这里的解释：https://github.com/angular/angular/issues/29050。如果你 console.log() 你在 ngOnChanges() 钩子中的变量你会得到正确的值，但在 ngOnInit() 中它们仍然是未定义的。使用自定义元素时，挂钩的执行顺序会发生变化。这就是为什么在你的它是未定义的。就我而言，我仍在寻找如何强制 ngOnChanges() 先运行然后再运行 ngOnInit() 但还没有运气。

Answer 5

我遇到这个问题大约两天了，终于找到了解决方案。

您需要做的是在您的子组件（Web 组件，您要公开）中使用方法 ngOnChanges()。因为这是为了检测您的 @Input() 字段的任何变化。

这里我留下了我的网络组件的sn-p代码：

@Component({
  selector: 'app-shipment-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnChanges {

  @Input() domain;

  @Output() response = new EventEmitter<string>();

  constructor() {
  }

  ngOnInit(): void {
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.domain) {
      console.log("Domain URL: ", this.domain);  
      this.response.emit(this.domain);
    }
  }

}

Answer 6

• 就我而言，当我将输入变量发送到自定义元素/Web 组件时，根本没有调用 ngOnChanges。所以我尝试了“属性绑定”，效果很好。

来自 angular.io：
Angular 中的属性绑定可帮助您设置属性值 直接地。属性绑定语法类似于属性绑定，但 而不是括号之间的元素属性，您在名称之前 带有前缀 attr 的属性，后跟一个点

更改以下实现

<custom-element name="{{userName}}"></custom-element>

                             (or)

<custom-element [name]="userName"></custom-element>

到这里：

<custom-element [attr.name]="userName"></custom-element>

对于传递常量值，使用

<custom-element [attr.name]="'John'"></custom-element>

注意：您将在 ngOnChanges() 方法中获取值。

Answer 7

在您的代码中，将问题中显示的所有位置的String 更改为string。看看它是否有效。

String 是 string 类型的构造函数。更多信息here

见distinction between string and String。

更新：

我有一种感觉，这与您使用的内联模板格式有关。

改变这个

@Component({
    selector: 'example',
    template: '<component-one [variable]="toPass" (callback)="onCallback($event)"></component-one>',
    styles: []
})

到这里，

@Component({
    selector: 'example',
    template: `<component-one [variable]="toPass" (callback)="onCallback($event)"></component-one>`,
    styles: []
})

看，我把template: ''改成了这个

template: ``

否则，内联模板字符串的解析可能会搞砸。

看看这是否有效。