首页 文章

Angular2中的子视图和事件侦听器

提问于
浏览 次
1

从父模板调用子组件时，如何从子模板中侦听事件？

我有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() {
    }
}

我不想将click事件添加到按钮，而是想在子组件中为onChange函数添加某种侦听器，以便在单击父视图中的按钮时进行监听 . 我尝试过使用HostListener，但只有在将HostListener添加到父组件时才会触发 .

typescript angular

1 回答

  • 1

    我就是这样做的，但请注意，我正在摆脱路由，如果你确实需要以你的方式进行路由，你将不得不弄清楚如何做同样的事情，如果我要使用路由我会将父组件和子组件放在同一路径中，然后我可以执行类似下面的操作：

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

    简而言之，这可以通过从父级更新子级上的语言绑定来实现，并且每次在父级上更改语言绑定时，将调用子级语言的setter方法，因此您可以执行任何操作，例如运行onChanged方法 .

    回复于

相关问题