Angular6中父组件调用子组件方法--本地变量调用

前提：Angular6+bootstrap

需求：在一个简单的信息维护页面中，父页面是列表展现，列表上方有“新增、修改、删除”等按钮，这里新增和修改的表单提取出来，作为一个组件使用，然后在父组件中需要调用子组件的表单重置方法。

思路：按照Angular官网的  “父组件与子组件通过本地变量互动”章节处理 在父组件中引入子组件的地方定义本地变量，然后在父模板中通过按钮点击的响应形式，调用子组件的方法，注意：这种方法，这里只能在父组件的模板中使用，在控制类中不可使用。

核心代码：

父组件：sysuser.component.html

  <div style="display: none" #displayNoneEl>
    <!--定义隐藏button ,调用子组件方法-->
    <button id="resetAddUserForm" (click)="addUser.resetForm();"></button>
  </div>
  <!--列表操作按钮栏-->
  <div class="col-lg-12 col-md-12  col-sm-12 col-xs-12 " style="padding: 0px;margin: 5px 0px;">
    <div class="col-lg-10 col-md-7 col-sm-7 col-xs-9 hidden-xs hidden-sm " style="padding: 0px">
      <button type="button" class="fa fa-plus btn  btn-success " (click)="addPage();" data-toggle="modal"
              data-target="#addFormModal"> 新增
      </button>&nbsp;
    </div>
  </div>
  <!--<div class="row clearfix">-->

  <!--弹出框-->
  <div #mymodel>
    <!-- 新增模态框（Modal） -->
    <div class=" modal fade"  id="addFormModal" maxlength="200" tabindex="-1" role="dialog" aria-labelledby="addFormLabel"
         aria-hidden="true" data-backdrop="static" data-keyboard="true" >
      <div class="modal-dialog modal-lg">
        <div class="modal-content" style="border-radius: 3px;">
          <div class="modal-header" style="padding: 10px 15px 10px 15px;background-color:  	#E8E8E8;">
            <!--<span class="fa fa-close icon-close-mid pull-right mat-dialog-title-close" data-dismiss="modal" aria-hidden="true"></span>-->
            <button type="button" class="fa fa-close btn btn-lg close" style="opacity: 1" data-dismiss="modal" aria-hidden="true">
              <!--&times;-->
            </button>
            <h4 class="modal-title" id="addFormLabel">
              新增用户信息
            </h4>
          </div>
          <div class="modal-body" style="padding: 0px 5px;">
            <!--<app-sysuser-form [user]="selectedUser"  (submitForm)="onSubmitForm($event)"></app-sysuser-form>-->
            <app-user-form [user]="selectedUser" #addUser (submitForm)="onSubmitForm($event)"></app-user-form>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>

父组件：sysuser.component.ts

export class SysuserComponent implements OnInit {
  
  selectedUser: UserInfo; // 所选中的用户信息
 
  @ViewChild('displayNoneEl')
  displayNoneEl: ElementRef;


  lastCloseResult: any;

  public constructor(private elementRef: ElementRef, private render: Renderer2) {
    
  }

 // 增加用户
  addPage(): void {
    // 重置子组件form表单
    this.displayNoneEl.nativeElement.querySelector('#resetAddUserForm').click();
    this.selectedUser = new UserInfo();
  }


} 

子组件：子组件正常使用即可，只需要在子组件的控制类中定义有父组件要调用的方法即可。

  /**
   * 重置表单
   */
  public resetForm() {
    this.userForm.reset();
  }

总结：1：在父组件中引入子组件的标签中定义变量#chilid

          2:    在父组件的模板中定义按钮，将按钮的click事件调用子组件的方法，此处用到定义好的变量  child.methodName();

           3：在父组件的控制类中需要调用子组件方法的地方，通过dom元素找到之前写好的button，触发button的点击事件即可。