如何有條件地將子組件附加到父組件？

Question

我有兩個組件，父組件和寄存器組件。

ParentComponent.html看起來像：

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

register.component.ts看起來像：

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="form-group group" *ngIf="instRoleList">
 </div>

因此，我希望單擊getChild（）時，將注冊組件附加到<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指令歸檔：

<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;
   }
}

此點擊事件將通過這種方法用作切換功能。