如何有条件地将子组件附加到父组件中？

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 代码 sn-p 看起来像：（它取决于从注册服务数据“”接收到的数据）

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

此点击事件将作为这种方法的切换功能。