将数据从子组件传递到父组件

Question

我试图将警报从子组件传递到父组件。

我有以下应用程序组件：

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

App.component.html：

<header>
Some header
</header>
<clr-alert [clrAlertType]="'alert-warning'" [clrAlertAppLevel]="true">
    <div class="alert-item">
        <span class="alert-text">
            {{My_Alert_value_that_I want to pass from child}}
        </span>
        <div class="alert-actions">
            <button class="btn alert-action">Fix</button>
        </div>
    </div>
</clr-alert>
<router-outlet></router-outlet>

我的孩子组件：

@Component({
    styleUrls: ['./child.component.scss'],
    templateUrl: './child.component.html',
})
export class ChildComponent {
  alerts: string
  constructor(){
    this.alerts = "";
  }

   this.alert = "My alerts, which I want to show on the app.component.html"
}

有人可以在这里帮我吗？

Answer 1

您可以使用EventEmitter并在父组件中处理事件，从而将EventEmitter数据公开给父代。

官方文档有一个使用EventEmitter很好的例子：

https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html