Question

我在一个组件中有telerik SideDrawer，所以我可以跨页面重复使用它遵循此answer ..工作正常。

在login.component.html里面我需要使用header.component.ts中存在的openDrawer（）方法 e.g：

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行，这并不好玩..我很想看到更好的方法。

访问容器组件的方法

1 个答案: