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代码片段如下所示:(这取决于从注册服务数据收到的数据＆＃34;＆＃34;）

<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指令很容易实现这一点：

    @RequestMapping(value="/createMerchantAddress", method = RequestMethod.POST )
public @ResponseBody String createMerchantAddress(@ModelAttribute("addressDTO") AddressDTO addressDTO,@AuthenticationPrincipal PNSolUser loggedUser){
    addressDTO.setPartyId(loggedUser.getPartyId());
    addressDTO.setCreatedBy(loggedUser.getUserId());
    addressDTO.setCreatedDate(Calendar.getInstance().getTime());

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

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

1 个答案: