Доступ к компонентам контейнера-компонента

Question

У меня есть telerik SideDrawer в компоненте, поэтому я могу повторно использовать его на страницах по , следуя этому answer .. отлично работает.

Внутри login.component.html мне нужно использовать метод OpenDrawer(), который существует в header.component.ts например:

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 линии для каждый компонент, который я использую, который не забавен. Мне бы хотелось увидеть лучший подход.