angular 2 ionic 2 chat app添加动态组件

Question

我正在构建一个聊天应用程序，对于离子2和角度2来说相当新。

我有一个看起来像这样的chat.html：

<ion-content padding>
    <div class="chat-container">
       <div class="chatbubble-reply">this is a message dude</div>
       <div class="chatbubble">this is a reply dude</div>
    </div>
</ion-content>
<ion-footer>
    <form [formGroup]="chatForm" (ngSubmit)="sendChatMessage()">
        <ion-input type="text" formControlName="messageInput" placeholder="start typing..."></ion-input>
        <ion-buttons end>
            <button item-right ion-button clear large type="submit"><ion-icon name="ios-send" ></ion-icon></button>
        </ion-buttons>
    </form>
</ion-footer>

我的chat.ts看起来像：

@IonicPage()
@Component({
  selector: 'page-chat',
  templateUrl: 'chat.html',
})
export class ChatPage {
    private chatForm : FormGroup;
    private chatMessage;

  constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder ) {
    this.chatForm = this.formBuilder.group({
        messageInput:['']
    });

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ChatPage');
  }

  sendChatMessage(){
    this.chatMessage = this.chatForm.controls['messageInput'].value;
    this.createChatBubble(this.chatMessage);

  }

  createChatBubble(chatMessage: string){
    alert(this.chatMessage);
  }

}

所以createChatBubble需要动态添加div。如果聊天部分必须以anuglar 2 / ionic 2方式完成不同，我很好。请指教