Angular 2 RC 5 - 无法绑定到“...”，因为它不是“...”的已知属性

Posted 2023-02-22

【中文标题】Angular 2 RC 5 - 无法绑定到“...”，因为它不是“...”的已知属性

【英文标题】：Angular 2 RC 5 - Can't bind to '...' since it isn't a known property of '...'

【发布时间】：2016-12-23 17:52:09

【问题描述】：

自从 Angular 2 RC 5 更新以来，我提出了一些问题。我有 3 个组件（电池、信号和地图）用于另一个组件。这 3 个组件在一个模块中声明：助手模块。 代码如下：

@NgModule(
    declarations: [
        SignalComponent,
        BatteryComponent,
        MapsComponent
    ],
    imports : [
        BrowserModule,
        FormsModule
    ],
    exports: [
        SignalComponent,
        BatteryComponent,
        MapsComponent
    ]
)
export class HelpersModule 

电池组件如下所示：

@Component(
    selector: 'as-my-battery',
    template: `
        <i class="fa fa-icon" aria-hidden="true"></i>
        `
)

export class BatteryComponent 
    @Input() level: number;
    @Output() icon: string;
    // constructor()  

    ngOnInit () 
        if (this.level < 5) 
            this.icon = 'battery-empty';
         else if (this.level >= 5 && this.level < 25) 
            this.icon = 'battery-quarter';
         else if (this.level >= 25 && this.level < 50) 
            this.icon = 'battery-half';
         else if (this.level >= 50 && this.level < 75) 
            this.icon = 'battery-three-quarters';
         else 
            this.icon = 'battery-full';
        
    

但是当我尝试将 as-my-battery 与输入级别一起使用时，我收到此错误：

Error: Uncaught (in promise): Template parse errors:
Can't bind to 'level' since it isn't a known property of 'as-my-battery'.
1. If 'as-my-battery' is an Angular component and it has 'level' input, then verify that it is part of this module.
2. If 'as-my-battery' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 (""checkbox" name=data.name value=data.name> data.name
                    <as-my-battery [ERROR ->][level]='data.battery'></as-my-battery>
                    <as-my-signal [level]='data.signal'></as-"): a@19:35

其他人有这些问题，并最终解决了这个问题吗？

我也找到了这个话题，但这不是我的答案：Can't bind to 'data' since it isn't a known property of 'teach-data'

最后，这是我的应用程序的引导程序：

@NgModule(
    declarations: [
        AppComponent
    ],
    imports: [
        NavbarModule,
        LoginModule,
        HelpersModule,
        KaartModule,
        LijstModule,
        LogsModule,
        InstellingenModule,
        StatistiekenModule,
        routing
    ],
    providers: [ APP_PROVIDERS, appRoutingProviders ],
    bootstrap: [ AppComponent ]
)
export class AppModule 

LijstComponent中需要用到电池组件，模块的声明：

@NgModule(
    declarations: [
        LijstComponent
    ],
    imports: [
        BrowserModule,
        HelpersModule
    ],
    exports: [
        LijstComponent
    ]
)
export class LijstModule 

Lijst 组件：

@Component(
    selector: 'as-lijst',
    providers: [DataService, MarkerService, AlertService],
    templateUrl: 'app/lijst/lijst.html',
)

export class LijstComponent 
...

还有一个 html 的 sn-p（数据是一个循环的 *ngFor）：

<as-my-battery [level]='data.battery'></as-my-battery>

【问题讨论】：

您想在哪个模块中使用BatteryComponent？应用模块？

在另一个组件 LijstComponent 中，我将代码添加到我的问题中

【参考方案1】：

我创建了解决方案，问题在于 gulp 的 uglify 选项。当将 mangle 选项设置为 false 时（在 config.js 中），应用程序构建并且错误消失了！