錯誤：在將指令傳遞到父指令外時，未定義輸出

我有一個root-app組件，它在模板中被定義爲這樣。錯誤：在將指令傳遞到父指令外時，未定義輸出

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給出錯誤Error: Output is not defined需要什麼定義或什麼是定義方法。我錯過了一些東西。

這是類定義：

@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(); 
    } 
}

更新：最後的工作代碼沒有developer === selectedDeveloper;this.complete.next();而this.complete.next()被放入ONSELECT功能。

來源

2016-01-15 Gary

你添加了嗎？ '從'angular2/core'導入{輸出};' – Langley

謝謝。我這樣做，並獲得'綁定表達式不能包含在[開發人員=== selectedDeveloper; this.complete.next（）;]在DevTableComponent @ 3：8'列33的鏈式表達式。我在技術上做的是將開發者的價值傳遞給父組件。然後將其作爲輸入傳遞給 .dev-details正在正常工作。但無法捕獲帶有價值的事件。 – Gary

你不能在模板中添加那麼多的代碼，你必須將所有的邏輯添加到一個返回布爾值的函數中，並像這樣調用它：'[class.selected] =「shouldSelect（）」' – Langley

如果您想將值傳遞給父組件，您可以利用自定義事件。此代碼位於父組件的模板：

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

觸發事件，你可以做這樣的事情在你的子組件：

@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對應到你想要的值事件包含和事件訂閱可以得到。

希望它可以幫助你，蒂埃裏

來源

2016-01-15 09:45:16

這個函數完成應該在父指令或實際指令中。 $ event.value是我的列表中的一些值在指令中。 – Gary

捕獲的值和事件被正確觸發。但是父母未定義。

{{developer.name}} - {{developer。技巧}}

'和類有'onSelect（developer：Developer）{ this.selectedDeveloper = developer; console.log（this.selectedDeveloper）; this.complete.emit（this.selectedDeveloper）; }'。在父''dev-table（complete）=「onSelect（$ event.value）」>' – Gary

現在安全地傳遞數據。謝謝。 – Gary

「@output是給錯誤的錯誤：。輸出沒有定義什麼是需要定義或定義是什麼方法，我失去了一些東西」：

import {Output} from "angular2/core";

你必須輸入您所使用的類的定義。

來源

2016-01-15 09:58:41 Langley

所有的工作和代碼現在工作。我已經在子指令中定義了事件。點擊捕獲數據（console.log工作正常）。我能夠從指令中正確地傳遞事件 - 不會產生錯誤。使用'this.complete.emit（someValue）;'但我無法捕獲父組件中的事件''它給$事件.value在父級中未定義。是否有一個不同的捕獲過程？ – Gary

只是'$ event'不是'$ event.value' – Langley

console.log未定義。 – Gary

錯誤：在將指令傳遞到父指令外時，未定義輸出

回答

相關問題