4

我有几个独立的 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 声明中是否缺少某些内容？

4

7 回答 7

9

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

于 2018-12-28T08:23:19.077 回答
2

我认为您只是想念理解新语法:)

当您在输入名称周围使用 [] 时，您告诉 Angular 您给了他一个变量。如果你不使用它，你会要求 angular 把它当作一个原语。

所以 ：

<component-one [variable]="myVar"

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

没有

<component-one variable="myVar"

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

无用但有效：

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

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

于 2018-09-27T16:06:03.390 回答
2

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

于 2021-01-20T08:03:52.013 回答
2

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

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

在这里，我留下了我的Web 组件的代码片段：

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

}
于 2021-01-21T16:49:16.147 回答
1
  • 就我而言，ngOnChanges当我将输入变量发送到自定义元素/Web 组件时，根本没有调用它。所以我尝试了“属性绑定”，效果很好。

来自 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() 方法中获得值。

于 2021-07-01T16:33:19.817 回答
1

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

@Input() variable:String = “”;
于 2018-09-27T16:08:21.380 回答
0

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

String是 type 的构造函数string。更多信息在这里

请参阅string 和 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: ``

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

看看这是否有效。

于 2018-09-27T16:21:23.427 回答