将数据从ng-template传递到其父组件Angular 4

在Angular 4中，可以通过使用@Output装饰器和EventEmitter来将数据从ng-template传递到其父组件。

首先，在子组件中定义一个输出属性，并使用@Output装饰器将其标记为可供父组件绑定的属性。然后，创建一个EventEmitter实例，并在需要传递数据的地方调用它的emit方法来触发事件。

以下是一个示例：

在子组件中：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'child-component',
  template: `
    <ng-template>
      <!-- 在ng-template中触发事件 -->
      <button (click)="passData()">传递数据</button>
    </ng-template>
  `
})
export class ChildComponent {
  @Output() dataPassed = new EventEmitter<string>();

  passData() {
    const data = '这是要传递的数据';
    this.dataPassed.emit(data);
  }
}

在父组件中，可以通过在子组件标签上绑定到子组件的输出属性来接收传递的数据。当子组件触发事件时，父组件中的相应方法将被调用，并接收传递的数据。

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

@Component({
  selector: 'parent-component',
  template: `
    <child-component (dataPassed)="receiveData($event)"></child-component>
    <p>接收到的数据：{{ receivedData }}</p>
  `
})
export class ParentComponent {
  receivedData: string;

  receiveData(data: string) {
    this.receivedData = data;
  }
}

在上述示例中，当点击子组件中的按钮时，将触发passData方法并传递数据。父组件中的receiveData方法将接收到传递的数据，并将其赋值给receivedData属性。然后，可以在父组件的模板中显示接收到的数据。

对于Angular 4的更多信息和示例，请参考腾讯云的Angular 4产品文档：Angular 4产品文档