时间戳

首页 > 解决方案 > angular8 输出装饰器不工作给出错误

angular - angular8 输出装饰器不工作给出错误

问题描述

demo.Parent.html

<p>demo-parent works!</p>
<app-demo-child (property)="parentFunction($event)"  ></app-demo-child>

demo.parent.component.ts

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


@Component({
  selector: 'app-demo-child',
  templateUrl: './demo-child.component.html',
  styleUrls: ['./demo-child.component.css']
})
export class DemoChildComponent implements OnInit {



@Output() property = new EventEmitter<string>();

 value : string="angualr";

  constructor() { 

  }


  senndData(){
    this.property.emit( this.value);
  }
  ngOnInit() {
  }

}

demo.child.html

<p>demo-child works!</p>

demo.child.component.ts

export class DemoChildComponent implements OnInit {

@Output() property = new EventEmitter<String>();

 value : string="angualr";

  constructor() { 

  }


  senndData(){
    this.property.emit( this.value);
  }
  ngOnInit() {
  }

}

.

这有什么错误？因为我是 Angular 的新手，所以我正在学习输出装饰器。我无法从子组件中恢复数据并将其显示在父组件中

标签： angular

解决方案

因此，如果我理解正确，在父项中执行某些事件时，您需要在子项中更改/发送数据。

如果是这样，这是一个简单的演示，例如，如何在单击父元素时修改子元素。

首先，我们需要在父组件中触发，我们将使用 (click) 事件。

demo.Parent.html

<p>this is the parent component </p>
<button (click)=sendData()> click me to change the child value </button>

现在让我们在 demo-parent.ts 类中实现 sendData() 函数以发出 evet

demo.parent.component.ts

export class DemoParentComponent implements OnInit {

 @Output() property = new EventEmitter<string>();

  constructor() { }

  senndData(){
    this.property.emit("new value from parent");
  }

  ngOnInit() {
  }

}

如您所见，当单击按钮时，我们触发了一个将输出发送给孩子的函数

现在让我们在子组件中欢迎我们收到的数据：

demo.child.html

<app-demo-parent(property)="parentFunction($event)"></app-demo-parent>

最后，我们需要在子组件中调用一个函数，当单击父组件时，在本例中为 parentFunction()

demo.child.component.ts

export class DemoChildComponent implements OnInit {

 value : string="angualr";

   constructor() { 
   }

 parentFunction(valueFromParent : string){
  this.value = valueFromParent;
  console.log("You have recieved a new value from the parent : valueFromParent ");
 }

  ngOnInit() {
 }
}

推荐阅读