首页 > 解决方案 > Angular 7无法绑定到因为它不是一个已知的属性(来自导入的模块)

问题描述

我有一个模块正在导入另一个模块以使用其中声明的组件。在下面的示例中,ModuleAComponentC正在尝试使用ModuleBComponentA. 似乎ModuleA需要 importModuleB才能使用它,因此ModuleB需要 export ModuleBComponentA。看起来很简单,但以下内容对我不起作用。

我明白了Can't bind to 'name' since it isn't a known property of 'module-b-component-a'

src/a/moduleA.module.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from "@angular/common"

import { ModuleAComponentC } from './c.component'
import { ModuleAComponentD } from './d.component'

import { ModuleB } from './../b/b.module'

@NgModule({
  imports: [
    BrowserModule,
    CommonModule, 
    ModuleB
  ],
  declarations: [
    ModuleAComponentC,
    ModuleAComponentD
  ]
})
export class ModuleA {}

src/b/moduleB.module.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from "@angular/common"

import { ModuleBComponentA } from './a.component'
import { ModuleBServiceA } from './a.service'

@NgModule({
  imports: [
    BrowserModule,
    CommonModule
  ],
  declarations: [
    ModuleBComponentA
  ],
  providers: [
    ModuleBServiceA
  ],
  exports: [
    ModuleBComponentA
  ]
})
export class ModuleB {}

src/b/a.component.ts

@Component({
  selector: 'module-b-component-a'
})
export class ModuleBComponentA {

  @Input('@') name: string

}

src/a/c.component.html

<module-b-component-a name="{{ test }}"></module-b-component-a>

标签: angulartypescript

解决方案


你错过的事情是name@Input()

@Component({
  selector: 'module-b-component-a'
})
export class ModuleBComponentA {
  @Input('name') name: string; // <-- 'name' in place of '@'
}

推荐阅读