Question

如何从子模板中调用子模板中的子模板中的事件？

我有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添加到父组件时才会触发。

Answer 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方法。

Angular2

1 个答案: