javascript - 如何使用 angular2 单击“添加”按钮来获取表单模型

Question

company.html

   

     <section class="main">
      <h1>Company Management</h1>
         <md-card class="mat-card">
           <button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>
 
        <md-card-title class="md-title mat-card-title">
          <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12 title">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Username</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Email</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Type</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Active</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Action</span>
            </div>
          </div>
          <hr>
        </md-card-title>
        <md-card-content class="md-content mat-card-content">
          <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Hotel</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>hotel@gmail.com</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>company</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span></span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <button class="iconBtn">
                <i aria-hidden="true" class="fa fa-pencil"></i>
              </button>
              <button class="iconBtn">
                <i aria-hidden="true" class="fa fa-pencil"></i>
              </button>
            </div>
          </div>
          <hr>
        </md-card-content>
      </md-card>
    </section>

    <ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" 
    (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    This is a modal.
  </div>
</ng-template>

company.component.ts

import { Component, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { ModalModule } from 'ngx-bootstrap/modal'; 
import { NgModule }  from '@angular/core';
import { Router } from '@angular/router';

@Component({
  templateUrl: './company.html'
})
export class CompanyComponent {

}
export class DemoModalServiceStaticComponent {
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
}

@NgModule({
  imports: [ModalModule.forRoot()]
})
export class AppModule{

}

在这里， 我需要在单击 add_button(+) 时显示一个表单(一种弹出框)，但点击该 add_button(+) 后它不会显示任何内容 我如何使用 angular2 单击“添加”按钮来获取表单模型？？？ (示例:我期望在单击 add_button[+] 后显示一个弹出框)

Answer 1

从“@angular/core”导入 ElementRef &ViewChild 如果您想访问 #template，您只需创建一个 viewchild 变量:

@ViewChild("template") template: ElementRef;

然后你可以使用 this.template 来访问它，它有很多值(value)。

然后如果你想访问一个表单进入模态，你也可以在你的表单中添加一个#form，然后访问this.modal.form