1. 子组件内嵌在父组件的模板中

在父组件的模板中直接使用子组件的选择器，将子组件的模板嵌套在父组件的模板中。子组件的内容会被呈现在父组件的模板中。

2. 通过@ViewChild装饰器获取子组件引用

在父组件中通过@ViewChild装饰器来获取子组件的实例，然后将子组件的实例加入到父组件的模板中。父组件就可以显示子组件的内容。

父组件模板：

父组件代码：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})

export class ParentComponent implements AfterViewInit {

  @ViewChild('childContainer', { static: false }) childContainer: ElementRef;

  constructor() {}

  ngAfterViewInit() {
    const childComponent = new ChildComponent();
    childComponent.viewContainerRef = this.childContainer;
    childComponent.ngOnInit();
  }
}

子组件：

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

@Component({
  selector: 'app-child',
  template: `
    
Child component content goes here
  `
})

export class ChildComponent {

  constructor() {}

  viewContainerRef: any;

  ngOnInit() {
    this.viewContainerRef.nativeElement.innerHTML = this.template;
  }

  get template() {
    return `
      
Child component content goes here
    `;
  }
}