無法綁定到'HiddenFlag'，因爲它不是'app-fog'的已知屬性

我想用@Input在子組件和父組件之間共享一個變量。我在我的父組件聲明public HiddenFlag: Boolean = true;和在HTML我稱這樣的孩子：無法綁定到'HiddenFlag'，因爲它不是'app-fog'的已知屬性

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

的App-霧是我的孩子組成：

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所有的答案。說實話，我仍然不知道問題是什麼，但這個問題不知怎麼解決了。

來源

2017-06-28 Nikolai

這是'boolean'，不'Boolean'。而'string'，而不是'String'。如果組件本身無法訪問，也可能因爲它未包含在模塊中而發生此問題。作爲一個手段性的問題，避免使用大寫的屬性名稱。大寫的標識符意味着指代類。 –

您是否在相關模塊聲明中包含了「FogComponent」組件？ –

是的，我有他們都在同一模塊以及。 – Nikolai

刪除public。試試：@Input() HiddenFlag: Boolean;。

來源

2017-06-28 12:26:49

我相信你的意思是'boolean'，而不是'Boolean'。清除公衆並不能解決任何問題。 –

是的，我試過了，它沒有幫助。 – Nikolai

這聽起來像一個模塊問題。 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

來源

2017-06-28 12:38:48 awiseman

這兩個組件都在同一個ngModule中聲明，所以這不是問題。 – Nikolai

@尼古拉啊，好的。那麼，在這種情況下，我只會同意@torazaburo，並建議您在輸入字段中嘗試沒有大寫的第一個字符。我做了一個示例應用程序來嘗試它，它似乎有所作爲，雖然我沒有產生錯誤信息（它只是沒有工作）。他也是正確的，'boolean'和'string'類型也沒有大寫。 – awiseman

試過，但也是沒有運氣。 – Nikolai

無法綁定到'HiddenFlag'，因爲它不是'app-fog'的已知屬性

回答

相關問題