代码之家  ›  专栏  ›  技术社区  ›  Logan Wlv

从子组件到父组件的角度5 EventEmitter发射未定义

  •  1
  • Logan Wlv  · 技术社区  · 6 年前

    string 从子组件到父组件。

    孩子在这里:

    //imports... 
    
        @Component({
        selector: 'child',
        templateUrl: './child.component.html',
        styleUrls: ['./child.component.css'],
        providers: [ChildService]
        })
    
    export class DataTableComponent implements OnInit {
        constructor(private http: HttpClient, private childService : ChildService) {}
    
        myMap = new Map<string, ISomeInterface>();
        currentSelection: string;
    
        @Output() sendDataEvent = new EventEmitter<string>();
    
        sendData() {
            console.log("sending this data:  " + this.myMap.get(this.currentSelection).name);
            this.sendDataEvent.emit(this.myMap.get(this.currentSelection).name);
        }
    }
    

    这是家长:

    html->

    <d-table (sendDataEvent)="receiveBusinessCycle(event)"></d-table>
    

    //imports...
    
    @Component({
      selector: 'parent',
      templateUrl: './parent.component.html',
      styleUrls: ['./parent.component.css'],
      providers: [ParentService]
    })
    export class MyParentComponent {
      totoName: string;
    
      constructor(private parentService : ParentService) {  }
    
      receiveBusinessCycle($event) {
        console.log($event); //shows in console 'undefined'
        console.log($event as string); 
        this.totoName = $event;
      }
    
    }
    

    问题是我得到了一个 事件接收父组件中的数据时,控制台日志如下:

    sending this data:  201808
    main.bundle.js:2328 undefined
    main.bundle.js:2329 undefined
    

    对这个问题有什么看法吗?

    2 回复  |  直到 6 年前
        1
  •  10
  •   SiddAjmera    6 年前

    你应该使用 $event

    <d-table (sendDataEvent)="receiveBusinessCycle($event)"></d-table>
    

    $事件

    显然,Angular在 $事件 只是。这就是为什么作为参数传入任何其他变量都不起作用。你可以多看看 here .

    here .

        2
  •  1
  •   Suren Srapyan    6 年前

    你错过了 $ 的前缀 event $event 是一个保留字,因此您的数据对组件标记中的事件处理程序是可见的,仅使用名称 $事件

    <d-table (sendDataEvent)="receiveBusinessCycle($event)"></d-table>