Как динамически создать компонент xml в машинописном тексте nativescript

Question

Я хочу добавить еще один компонент, такой как макет, кнопка, изображение и т. Д. *

Это мой код xml, и я хочу добавить xml в stacklayout с идентификатором "chatbox":

<GridLayout orientation="vertical" rows="*, auto" columns="auto,*, auto"> 
    <ScrollView row="0" colSpan="3" col="0">
         <StackLayout id="chatbox">
              // I want to add XML component here dynamically
         </StackLayout>
    </ScrollView>

Вот мой текущий машинописный код, но он не работает.Он даже не показывает ошибку компиляции.

export function onSendButtonTap(args: EventData){

const button = <Button>args.object;
const bindingContext = <HomeViewModel>button.bindingContext;

const page = <Page>args.object;
const stack = new StackLayout();
stack.getViewById("chatbox");
const label = new Label();
label.text = "label";
stack.addChild(label);;
bindingContext.sendMessage();                }

Answer 1

Теперь, если вы используете ссылку на страницу, вы можете использовать getViewById для доступа к контейнеру Stacklayout через его уникальный идентификатор.

Например XML

<GridLayout rows="100, *">
    <Button row="0" text="Tap to add Label" tap="onButtonTap" />
    <StackLayout row="1" id="chatbox">
        // When you tap the button the label will be added here
    </StackLayout>
</GridLayout>

TypeScript

onButtonTap(args: EventData): void {
    console.log("Button was pressed");
    const myButton = <Button>args.object;
    const page = myButton.page; // getting page reference via the button object

    const stack = <StackLayout>page.getViewById("chatbox");
    const label = new Label();
    label.text = "My New Label";
    stack.addChild(label);;
}

Или вы можете получить доступ к ссылке на страницу через некоторые из событий жизненного цикла страницы

XML

<Page loaded="pageLoaded" class="page">

TypeScript

export function pageLoaded(args: EventData) {
    let page = <Page>args.object;
    const stack = <StackLayout>page.getViewById("chatbox");
    const label = new Label();
    label.text = "My New Label";
    stack.addChild(label);;
}

Демонстрация игровой площадки здесь (обратите внимание, что в демонстрации используется NativeScript Core с языком TypeScript).Для Angular вы можете использовать Angular ViewCHild или ссылку на страницу через DI в конструкторе компонент.