兒童的意見和事件偵聽器在Angular2

如何傾聽來自孩子組件內部子模板的事件時，他們是從父模板叫什麼名字？兒童的意見和事件偵聽器在Angular2

我有2個組件：app.ts和child.ts;

app.ts：

@Component({ 
    selector: 'app', 
    template: '<button>Main button</buton><router-outlet></router-outlet>', 
    encapsulation: ViewEncapsulation.None, 
    directives: [ROUTER_DIRECTIVES], 
}) 
@RouteConfig([ 
    {path: '/child/', component: ChildCmp, as: 'Child'} 
]) 
export class AppCmp { 
}

child.ts：

@Component({ 
    selector: 'child', 
    template: 'This is child page!' 
}) 
export class AppCmp { 

    // This method should be called, when mail button is pressed 
    onChange() { 
    } 
}

我不想點擊事件添加到按鈕，而不是我想補充某種監聽子組件中的onChange函數，以便在父視圖中的按鈕被單擊時監聽。我用HostListener嘗試過，但只有當HostListener添加到父組件時纔會觸發。

來源

2015-11-25 Hurley

我不知道我理解你的問題。你真的想讓ChildCmp聽AppCmp中的按鈕嗎？這將違反angular2的Component結構範例。組件不應該有可能的父組件的知識。爲什麼不聽AppCmp（父代）中的按鈕點擊事件，然後在客戶端調用函數onChange（）？ –

正確的，我做的是我在頁面頂部有語言選擇（這是父組件），我想，當用戶更改語言重新加載子組件的內容的原因。 – Hurley

這是，如果我我會怎麼做，但是請注意，我擺脫了路由，你必須弄清楚如何做同樣的事情，如果你真的需要在你的方式佈線，個人是使用路由我會把兩家母公司和子組件在相同的路線，然後我可以做一些類似下面：

@Component({ 
    selector: 'app', 
    template: '<button (click)="switchLanguage('German')">Main button</buton> 
       <child [language]="selectedLanguage"></child>', 
    encapsulation: ViewEncapsulation.None, 
    directives: [ROUTER_DIRECTIVES, ChildCmp], 
}) 
export class AppCmp { 
    public selectedLanguage:string="English"; 

    public switchLanguage(newLanguage:string):void{ 
     this.selectedLanguage=newLanguage; 
    } 
}

child.ts

@Component({ 
    selector: 'child', 
    template: 'This is child page! with language {{language}}' 
}) 
export class ChildCmp { 
    private _language:string; 
    @Input() 
    public get language():string{ 
     return this._language; 
    }; 
    public set language(newValue:string):void { 
     this._language=newValue; 
     this.onChange(); 
    } 
    // This method should be called, when mail button is pressed 
    onChange() { 
    } 
}

簡單地說，這個工程通過更新來自父母的對孩子的語言約束，以及每次語言的約束在父級上更改e綁定時，將調用子級上語言的setter方法，因此您可以像運行onChanged方法那樣執行所需的任何操作。

來源

2015-11-26 05:52:09

感謝您的建議！它看起來像傳遞屬性的子組件是他們的路線圖：https://github.com/angular/angular/issues/4452 – Hurley

這個問題看起來很有希望，那是後話，很多人會想！ –

兒童的意見和事件偵聽器在Angular2

回答

相關問題