Angular ContentChild

我发现失败了 . 我试图在Angular中使用ContentChild . 我创建了2个组件 (BlogEntries, BlogEntry) 一个知道这些的模块，并将该模块导入主组件app.component .

BlogEntries 使用 BlogEntry 作为ChildContent . 在BlogEntries模板中，我设置了 <ng-content></ng-content> 元素 .

当我启动应用程序时 . 显示BlogEntries中的Stuff，但不显示来自Contentchild BlogEntry的内容 .

希望有人可以帮助我 .

的AppModule： -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BlogentriesModule } from './blogentries/blogentries.module';

@NgModule({
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BlogentriesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent模板

<wr-blog-blogentries></wr-blog-blogentries>

BlogEntries模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BlogentriesComponent } from './blogentries.component';
import { BlogentryComponent } from './blogentry/blogentry.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [BlogentriesComponent, BlogentryComponent],
  exports: [BlogentriesComponent]
})
export class BlogentriesModule {

}

BlogEntries组件

import { Component, ContentChild, OnInit, AfterContentInit, QueryList } from '@angular/core';
import { BlogentryComponent } from './blogentry/blogentry.component';

@Component({
  selector: 'wr-blog-blogentries',
  templateUrl: './blogentries.component.html',
  styleUrls: ['./blogentries.component.css']
})
export class BlogentriesComponent implements OnInit, AfterContentInit {
  @ContentChild(BlogentryComponent) blogentry: BlogentryComponent;
  constructor() { }

  ngOnInit() {
  }

  ngAfterContentInit() {
    console.log(`ngAfterContentInit - blogentry is ${this.blogentry}`);
  }

}

BlogEntries模板

<p>
  blogentries works!
</p>
<ng-content></ng-content>

BlogEntry组件

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

@Component({
  selector: 'wr-blog-blogentry',
  templateUrl: './blogentry.component.html',
  styleUrls: ['./blogentry.component.css'],
})
export class BlogentryComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

BlogEntry模板

<div>
  Blog Entry
</div>