子コンポーネントを親コンポーネントに条件付きで追加する方法は？

Question

私は親コンポーネントとレジスタコンポーネントの2つのコンポーネントを持っています。

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

@Component({ 
    selector: 'register', 
    templateUrl: '../templates/register.html' 
}) 
export class RegisterComponent implements OnInit { 
    ngOnInit() { 
     this.registerService.getRoleList() 
     .subscribe(res => { 
      if(res.data){ 
       this.instRoleList = res.data.roleList; 
      } 
     }); 

    /* ngOnInit calls a service from which data is received and certain 
     conditions are met. I want this service to go only when getDetails() is called and <register> should get append to <div id="signup> 

*/ 
    } 
} 

register.htmlコードスニペットは、次のようになります：

<div class="tab-content"> 
    <div class="tab-pane" id="signup" (click)="getChild()"> 
     <register></register> --//register component 
    </div> 
</div> 

register.component.tsのようになります。

ParentComponent.htmlは次のようになります（それがデータでレジスタサービスから受信依存しますデータ ""）

ですから、getChild（）をクリックしてコンポーネントのget追加された<div id="signup">

どのようにこれを行うには？

<div class="tab-pane" id="signup" (click)="getChild()"> 
      <!-- register component to append here on getChild() click --> 
</div> 

私は既に以下のコードを使用していますが、動作しませんでした。

$('#signup').append('<register></register>') 

Answer 1

これは簡単にngIfディレクティブでarchievedすることができます

<div class="tab-content"> 
     <div class="tab-pane active" id="signin"> 
      <!-- other code --> 
     </div> 
     <div class="tab-pane" id="signup" (click)="getChild()"> 
      <register *ngIf="condition"></register> --//register component 
     </div> 
    </div> 

@Component({ 
    selector: 'register', 
    templateUrl: '../templates/register.html' 
}) 
export class ParentComponent { 
    condition: boolean = false; 
    getChild(){ 
     this.condition = !this.condition; 
    } 
} 

このクリックイベントがこのアプローチにトグル機能として動作します。