angular - 无法将子组件显示到父组件中

Question

我有一个父组件ViewCalendars

视图-calendars.component.html

 <div class="container-calendar">
      <ca-month-header>
      </ca-month-header>
  </div>

查看日历.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';  
import { ActivatedRoute } from '@angular/router';
import { MonthHeaderComponent } from './ca-month-header/month-header.component';

@Component({
  selector: 'ca-view-calendars',
  templateUrl: './view-calendars.component.html',
  styleUrls: ['./view-calendars.component.css']
})
export class ViewCalendarsComponent implements OnInit {
  @ViewChild(MonthHeaderComponent) header: any;
  ngOnInit() {
  }
}

和一个子组件MonthHeader

月-header.component.html

<div class="month-header">
  <div class="month">
    <label> Month </label>
  </div>
</div>

月头.component.ts

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

@Component({
  selector: 'ca-month-header',
  templateUrl: './month-header.component.html',
  styleUrls: ['./month-header.component.css']
})
export class MonthHeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这就是我在 DevTools 中得到的。

我已经在模块中导入了组件，我不明白为什么不显示子组件

我错过了什么？

标签： angular

Answer 1

Angular 编译器控制台上是否有任何错误？

如果没有，我建议您尝试在 Month 标头组件中打印不同的内容，例如h2标签中的内容，然后查看是否打印。您还应该确认您的组件是否在模块中正确声明和导入。