访问容器组件的方法

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 行，这并不有趣。我希望看到更好的方法。