Angular ContentChild

Question

我遇到了问题而我没有发现失败。 我试图在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 Template

<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>

Answer 1

要使@ContentChild(BlogEntry)生效，您需要传递内容

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