我如何在angular中添加或“注入”来自服务的组件到dom？

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

import { MyService } from './my-service.service';

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

import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-my-component',
  template: '<div>{{ data }}</div>'
})
export class MyComponent {
  data: string;

  constructor(private myService: MyService) {
    this.data = this.myService.getData();
  }
}

<app-my-component></app-my-component>