StackLayout - 添加子项不是函数

Question

这发生在 NativeScript + Angular 应用程序中。

正如documentation 所说，我正在尝试使用StackLayout.addChild 方法在StackLayout 视图中动态添加标签。

我的视图如下所示：

<MainActionBar > </MainActionBar>
    <ScrollView orientation="vertical" #scroll>

    <StackLayout class="full-page settings-list pad-bottom" #stack >
            <Label class="text-color" text="Cadastro genérico"></Label>
    </StackLayout>

    <StackLayout class="full-page settings-list pad-bottom">
            <Button class="btn btn-primary btn-active" id="createInput" text="Cria input" (tap)="criaInput()"></Button>
            <Button class="btn btn-primary btn-active" id="createSelect" text="Cria select" (tap)="criaSelect()"></Button>
    </StackLayout>

</ScrollView>

打字稿类：

    import { FormControl, Validators } from '@angular/forms';
import {
    ViewChild, ChangeDetectorRef, OnInit, AfterViewInit,
    ChangeDetectionStrategy, Component
} from '@angular/core';

import {NavigationEnd} from '@angular/router';

import sideDrawerModule = require('nativescript-telerik-ui/sidedrawer');
import {RadSideDrawerComponent} from "nativescript-telerik-ui/sidedrawer/angular";
import {DrawerTransitionBase, PushTransition} from "nativescript-telerik-ui/sidedrawer";
import {Page} from "ui/page";
import {Frame} from "ui/frame";
import {RouterExtensions} from "nativescript-angular";
import {DrawerService} from "../../services/drawer.service";
import {ActionBarUtil} from "../../utils/actionbar.util";
import {Observable} from "data/observable";

import { Label } from 'ui/label';

import { StackLayout } from 'ui/layouts/stack-layout';


@Component({
    moduleId: module.id,
    selector: 'cadastro-generico',
    templateUrl: 'cadastro-generico.component.html',
    styleUrls: ['cadastro-generico.component.scss'],
    changeDetection: ChangeDetectionStrategy.Default
})
export class CadastroGenericoComponent extends Observable implements OnInit, AfterViewInit {


    @ViewChild('stack') stack : StackLayout;

    constructor(private routerExtensions: RouterExtensions,
        private changeDetectionRef: ChangeDetectorRef,
        public drawerService: DrawerService)  {

        super();
            console.log(`RelatorioComponent constructor`);
        }

        ngOnInit() {
            console.log(`RelatorioComponent ngOnInit`);
        }

        ngAfterViewInit() {
            console.log("RelatorioComponent ngAfterViewInit - this.drawerComponent.sideDrawer=", this.drawerService.drawer);
            this.changeDetectionRef.detectChanges();
        }

        navigateTo(pathToNavigate:string) {
            console.log("navigating to:", pathToNavigate);
            this.routerExtensions.navigate([pathToNavigate], {clearHistory: true});
        }

        criaInput(){
            console.log("clicou cria input")
            let lbl = new Label()
            lbl.text = "Share This!"
            this.stack.addChild(lbl)
        }

        criaSelect(){
            console.log("clicou cria select");
        }
}

criaInput() 方法应该在屏幕上添加一个标签。 Altought，当我点击按钮时，会发生以下错误：

System.err: com.tns.NativeScriptException:

System.err: Calling js method onClick failed

System.err: TypeError: this.stack.addChild is not a function

关于如何解决此问题的任何想法？

Answer 1

改成这样：

@ViewChild('stack') stack : ElementRef; // import { ElementRef } from "@angular/core";

// and later:
const myStack: StackLayout = this.stack.nativeElement; // import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
myStack.addChild(.....);