我有几个单独的Web组件，由角度元素制成，我将其导入到一个主组件中，该组件具有路由器并且是基本应用程序。 路线非常简单：
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" });
}
}
现在，当我启动主应用程序时，一切都按预期显示，回调工作正常，但变量未定义。 我的网络组件中的@Input声明中是否缺少某些内容？
由于您使用的是角度元素，请确保您的变量名称是这样的小写字母@Input() myvariable: string而不是@Input() myVariable: string检查这里 https://github.com/angular/angular/issues/24871
我认为这是这里的解释：https://github.com/angular/angular/issues/29050。如果你在ngOnChanges((钩子中控制台.log((你的变量，你会得到正确的值，但在ngOnInit((中它们仍然是未定义的。使用自定义元素时，钩子的执行顺序会发生变化。这就是为什么在你的中它是未定义的。就我而言，我仍在寻找如何强制ngOnChanges((先运行，然后再运行ngOnInit((，但还没有运气。
我想你只是错过了理解新语法:)
当你在输入名称周围使用[]时，你告诉angular你给他一个变量。如果你不使用它，你要求 angular 把它当作一个原始的。
所以：
<component-one [variable]="myVar"
必须在组件中定义一个名为"myVar"的变量
没有
<component-one variable="myVar"
Angular 将 "myVar" 作为字符串值
无用但有效：
<component-one [variable]="'myVar'"
将新字符串作为变量
我遇到了这个问题大约两天，终于找到了解决方案。
你要做的是在你的组件子组件(你想要公开的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);
}
}
}
您只需在组件一中启动变量即可。那么它应该可以工作
@Input() variable:String = “”;
- 就我而言，当我将输入变量发送到自定义元素/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((方法中获得值。
在代码中，将问题中显示的所有位置的String更改为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: ``
否则，内联模板字符串的分析可能会搞砸。
看看这是否有效。