Angular 7 无法绑定到 <property> 因为它不是 <component> 的已知属性(来自导入的模块)

aml*_*amm 2 typescript angular

我有一个模块正在导入另一个模块以使用其中声明的组件。在下面的示例中,ModuleAComponentC尝试使用ModuleBComponentA. 似乎ModuleA需要导入ModuleB才能使用它,因此ModuleB需要导出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 {}
Run Code Online (Sandbox Code Playgroud)

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 {}
Run Code Online (Sandbox Code Playgroud)

src/b/a.component.ts

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

  @Input('@') name: string

}
Run Code Online (Sandbox Code Playgroud)

src/a/c.component.html

<module-b-component-a name="{{ test }}"></module-b-component-a>
Run Code Online (Sandbox Code Playgroud)

Ana*_*via 10

你错过了的事是指定name@Input()

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