Question

我尝试在示例应用程序中实现Angular的ContentChildren方案。 对于ContentChild，它起作用，但对于ContentChildren，它在控制台中引发错误。在子组件中，我使用了String类型的input属性，并且正在引用相同的属性。

1）ng内容模板html（footer.component.html）文件

<div>
  <ng-content>
  </ng-content>
  hello test from content
</div>

2）在console.component.html

中输入投影片段

<app-footer>
  <app-child *ngFor="let mes of messages" [childMessage]="mes">
  </app-child>
</app-footer>

3）子组件-child.component.html

<p>
  Say {{ childMessage }}
</p>

4）子组件类-child.component.ts

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() childMessage : string = 'abc';

  @Output() messageEvent = new EventEmitter<string>();

  constructor() { }

  ngOnInit() {
  }
}

控制台错误-

错误错误：未捕获（承诺）：错误：模板解析错误：   无法绑定到“ ngForOf”，因为它不是的已知属性   “ app-child”。   1.如果“ app-child”是一个Angular组件，并且具有“ ngForOf”输入，则请验证它是否是此模块的一部分。   2.如果“ app-child”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。   3.要允许任何属性，请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。（“ ->
  ] * ngFor =“让我发短信”   [childMessage] =“ mes”>           ”）：ng：///DashboardModule/DashboardComponent.html@18：13属性绑定   嵌入式模板上的任何指令均未使用ngForOf。确保   属性名称拼写正确并且所有指令都是   列在“ @ NgModule.declarations”中。（“ -> [错误   ->]

Answer 1

听起来好像您忘了导入 common 模块。

import {NgModule} from '@angular/core';

@NgModule({
    imports: [
        CommonModule
    ],
    // .....
})
export class AppModule {
}

Answer 2

也许使用ng-template包裹子组件。

<ng-template *ngFor="let mes of messages" >
  <app-child  [childMessage]="mes">
  </app-child>
</ng-template>

如果使用ContentChildren

2 个答案: