Question

我正在尝试使用@Input在子组件和父组件之间共享变量。我已经在我的父组件中声明了public HiddenFlag: Boolean = true;，并且在html中我已经调用了这样的孩子：

<app-fog [hidden] = "HiddenFlag" [HiddenFlag] = "HiddenFlag"></app-fog>

App-fog是我的孩子组成部分：

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

@Component({
    selector: "app-fog",
    templateUrl: "./fog.component.html",
    styleUrls: ["./fog.component.css"]
})

export class FogComponent implements OnInit {

    @Input() public HiddenFlag: Boolean;

    public fogClass: String;
    public OverlayClass: String = "hidden";

    constructor() { }

    ngOnInit() { }

    Close() {
       this.HiddenFlag =  true;
    }
 }

问题是，如果我尝试加载网站，它说：

Uncaught Error: Template parse errors: Can't bind to 'HiddenFlag' since it isn't a known property of 'app-fog'

如果我删除[HiddenFlag] = "HiddenFlag"错误消失。如果您能提供任何帮助，我们将不胜感激。

编辑：所有答案的Thx。说实话，我仍然不知道问题是什么，但问题以某种方式解决了。

Answer 1

删除公开。尝试：@Input() HiddenFlag: Boolean;。

Answer 2

这听起来像是模块问题。 Angular并不了解app-fog选择器的定义。您的FogComponent可能未列在模块的declarations列表中。

@NgModule({
    declarations: [FogComponent, ...],
    ...
})
export class YourModule {}

或者，如果父项和子项位于不同的模块中，则需要在父模块中导入子模块，并将子项导出到自己的模块中。

@NgModule({
    imports: [ChildModule, ...],
    ...
})
export class ParentModule {}


@NgModule({
    declarations: [FogComponent, ...],
    exports: [FogComponent, ...],
    ...
})
export class ChildModule {}

https://angular.io/guide/ngmodule

无法绑定到'HiddenFlag'，因为它不是'app-fog'的已知属性

2 个答案: