仅呈现来自my angular4组件的html

现在我有以下HTML组件

@Component({
  selector: 'app-component',
  template: '<div class="col-md-6">data</div><div class="col-md-6">data</div>',
  styleUrls: ['./my.component.css']
})
export class NSOmultiselectComponent implements OnInit, OnChanges {

}

@组件({
选择器：“应用程序组件”，
模板：“数据数据”，
样式URL:['./my.component.css']
})
导出类NSOmultiselectComponent实现OnInit、OnChanges{
}

如果我在代码中添加了应用程序组件，那么我只想呈现来自该组件的HTML内容

@Component({
  selector: 'app-component',
  template: '<div class="col-md-6">data</div><div class="col-md-6">data</div>',
  styleUrls: ['./my.component.css']
})
export class NSOmultiselectComponent implements OnInit, OnChanges {

}

现行代码

<div class="row">
    <div class="col-md-6">data</div>
    <div class="col-md-6">data</div>
    <app-component></app-component>
</div>

数据
数据

预期产量

<div class="row">
    <div class="col-md-6">data</div>
    <div class="col-md-6">data</div>
    <div class="col-md-6">data</div>
    <div class="col-md-6">data</div>
</div>

数据
数据
数据
数据

---

是否有任何方法可以从组件呈现唯一的HTML

您需要将HTML转换为HTML实体。请在模板中使用此代码

@Component({
  selector: 'app-component',
  template: '<div class="col-md-6">data</div><div class="col-md-6">data</div>',
  styleUrls: ['./my.component.css']
})
export class NSOmultiselectComponent implements OnInit, OnChanges {

}

<div> class="col-md-6">data</div>
<div>div class="col-md-6">data </p>