`错误：指令外传递价值于母公司的指令时，输出不defined` [英] `Error: Output is not defined` when passing value outside a directive to parent directive

问题描述

我这是在模板中定义一个这样的根应用程序组件。

I have an root-app component which is defined like this in the template.

template: `
<dev-table (complete)="onSelect(developer)"></dev-table>
<dev-details [selectedDeveloper]="selectedDeveloper"></dev-details>
`
directives: [DevDetailsComponent, DevTableComponent],
providers: [DevValueService, provide(DevService, {useClass: DevService})]

是一个清单，并在内部列表中的一个的选择应发送被送入作为选择显影剂的列表（显影剂）的值。 @input的定义是正确的，并考虑到正常。但@output是给一个错误错误：输出没有定义什么定义是需要或定义是什么方法。我失去了一些东西。

is a list and on selection of one of the internal list it should send the value of the list (developer) which is passed into as selected developer. @Input is defined right and is taken into correctly. But the @output is giving an error Error: Output is not defined What definition is needed or what is the definition method. I am missing something.

这是类定义：

@Component({
  selector: 'dev-table',
  template: `
    <ul class="dev">
      <li *ngFor="#developer of developers"
        [class.selected]="developer === selectedDeveloper;this.complete.next();"
        (click)="onSelect(developer)">
        <span class="spanbackground">{{developer.name}}</span> -  {{developer.skill}}
      </li>
    </ul>  
  `, 
  providers: [DevService]
})

export class DevTableComponent implements OnInit{
    public developers : Developer[];
    public selectedDeveloper : Developer;
    constructor(private _DevService: DevService) { }
    @Output() complete = new EventEmitter(); 
    public onSelect(developer: Developer) { this.selectedDeveloper = developer; }
    getDevelopers(){
      this._DevService.getDevelopers().then(developers => this.developers = developers)
    }
    ngOnInit(){
      this.getDevelopers();
    }
}

更新：最后的工作code没有开发商=== selectedDeveloper; this.complete.next（）; 而 this.complete.next（）被放入ONSELECT功能。

UPDATED: The final working code did not have developer === selectedDeveloper;this.complete.next(); rather this.complete.next() was put into the onSelect function.

推荐答案

如果您想将价值传递给可以利用自定义事件的父组件。这code位于父组件的模板：

If you want to pass the value to the parent component you can leverage custom event. This code is located in the template of the parent component:

@Component({
  (...)
  template: `
    <dev-table (complete)="someMethod($event.value)"></dev-table>
  `
})
export class ParentComponent {
  someMethod(value) {
    console.log('complete event - value = ' + value);
  }
}

要触发事件，你可以做这样的事情在你的子组件：

To trigger the event, you could do something like that in your child component:

@Component({
  (...)
  template: `
    (...)
    <span (click)="triggerCompleteEvent()">Trigger complete event</span>
  `
})
export class DevTableComponent implements OnInit{
  @Output()
  complete:EventEmitter;

  constructor() {
    this.complete = new EventEmitter();
  }

  triggerCompleteEvent() {
    this.complete.emit(someValue);
  }
}

someValue中对应到你想要的事件包含和事件订阅可以得到价值。

someValue corresponds to the value you want the event contains and event subscribes can get.

希望它可以帮助你，
蒂埃里

Hope it helps you, Thierry

这篇关于`错误：指令外传递价值于母公司的指令时，输出不defined`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！