如何在ts文件中定义innerHTML并在Angular 4的html文件中调用它？

Question

以下代码块当前在我的html文件中，但我想在相应的ts文件中定义它，然后使用innerHTML在我的html文件中调用它。

<ion-header>

  <ion-navbar>
    <ion-title>Baseplan Roster</ion-title>
  </ion-navbar>

</ion-header>
<ion-content>
  <div padding center text-center>
      <h3>Base Plan Roster</h3>   
<div innerHTML = > // I want to just call the innerHTML here which defines the below code(ion-slides block), this code should be placed in the ts file and not here below inside the ts file.

        <ion-slides  pager="true" id="slides">
                  <ion-slide *ngFor ="let st of obj">
                    <h3>{{rost.dayOfTheWeek}}</h3>
                    <ion-item *ngFor= "let m of st.segment">
                    <h2>lets </h2>
                    <h2>({{m.name}})</h2>
                    <h3>Grade:
                      <b>{{m.grade}}</b>
                    </h3>
                    <h3>On Date:
                      <b>{{m.OnDate}}</b>
                    </h3>
                    <h3>Off Date:
                      <b>{{m.OffDate}}</b>
                    </h3>
                  </ion-item>
                  </ion-slide>
                </ion-slides>

</div>
</ion-content>



        Currently my ts file looks like this:

        import { Component, ViewChild } from '@angular/core';
        import { IonicPage, NavController, NavParams, LoadingController, Loading, Slides } from 'ionic-angular';

         @IonicPage()
            @Component({
              selector: 'page-manager-details',
              templateUrl: 'manager-details.html',
            })
            export class ManagerDetailsPage {

          unFit: fitModel[] = [];
          fit: fitModel[] = [];
          default: fitModel[] = [];


              constructor(public navCtrl: NavController, private crewProvider: 
                         CrewProvider, public navParams: NavParams,
                         public loadingCtrl: LoadingController, public utils: 
                         UtilsModule) {

            showLoading() {

                this.loading = this.loadingCtrl.create({
                  content: 'Loading Data'
                });

                this.loading.present();
              } 

              ionViewDidLoad() {

              this.obj = this.navParams.data.rosterDetails;

                  for (let mainData of this.obj ) {

                    for(let newData of mainData.status){
                      if (newData.condition == 'Fit') {
                        this.fit.push(newData);
                      }

                      if (newData.condition == 'Not Fit') {
                        this.notFit.push(newData);
                      }
                      if (newData.condition == 'Default') {
                        this.default.push(newData);
                      }
                    }

                    this['unFit'+mainData.dayOfTheWeek] = this.unFit;
                    this['Fit'+mainData.dayOfTheWeek] = this.Fit; 
                    this['default'+mainData.dayOfTheWeek] = this.default; 

                   // i want to define the innerHTML here.

                    this.unFit = [];
                    this.fit = [];
                    this.default = [];
            } 
        }    

   }

请协助我如何在ts文件中定义我的html代码块（ion-slide代码块），并使用innerHTML标记在html文件中调用它。