访问容器组件的方法

Question

我有一个组件的telerik SideDrawer，所以我可以在answer之后通过 重复使用它。工作正常。

内部login.component.html我需要使用存在于header.component.ts 例如openDrawer（）方法：

login.component.html

<your-header> 
    <StackLayout class="content"> 
     <Button text="Open!" (tap)="openDrawer()"></Button> 
    </StackLayout> 
</your-header> 

header.component。 ts

//~ 
export class HeaderComponent //~ 
{ 
    //~ 
    public openDrawer() { 
     console.log('opened!'); 
     //~ 
    } 
    //~ 
} 

但我得到一个错误：self.context.openDrawer不是一个函数。

怎么办？

Answer 1

以下this answer不难

login.component.html：

<your-header> 
    <StackLayout class="content"> 
     <Button text="Open!" (tap)="_parent.openDrawer()"></Button> 
    </StackLayout> 
</your-header> 

login.component.ts：

import { Component, ViewChild } from "@angular/core"; 
import { HeaderComponent } from "../header/header.component"; 
@Component({ 
    selector: "login", 
    templateUrl: 'pages/login/login.html' 
}) 
export class LoginComponent { 
    constructor() {} 
    @ViewChild(HeaderComponent) 
    private _parent: HeaderComponent; 
} 

不幸的是我需要添加3线我使用的每个组件都不好玩。我很想看到更好的方法。