通过Angular 2中的组件传递值

时间:2017-03-02 07:11:48

标签: angular

我正在使用Ng2Bs3ModalModule来显示弹出一个组件。在这里,我使用以下方式:

我在主组件上创建了一个模板,如下所示

<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">Update Job Service</h4>
    </modal-header>
    <modal-body>
        <app-job-service-edit></app-job-service-edit>
    </modal-body>
</modal>

此后,我在(click)事件中使用以下model.open()打开此模型。

<button type="button" class="flat btn-danger" name="table_records"  (click)="modal.open()">EDIT</button>

现在我需要通过单击上面的按钮将值传递给组件。我该怎么做呢???

提前致谢。

1 个答案:

答案 0 :(得分:0)

您可以使用其他函数调用以半分号发送值。

<强> (click)="modal.open();(click)="test('hello')

<button type="button" class="flat btn-danger" name="table_records"  (click)="modal.open();(click)="test('hello')">EDIT</button>

这是组件示例。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  styles: [`
    .app {
      display: block;
      text-align: center;
      padding: 25px;
      background: #f5f5f5;
    }
  `],
  template: `
    <div class="app">
       <a (click)="test('hello')">Click me to alert</a>
    </div>
  `
})
export class AppComponent {


  test(value): void {
  console.log(value)
  alert(value)
}

}

Here is a workinf DEMO