Nativescript加载自定义组件

2 回答

• 0

  所以你试图以编程方式生成TabView？我建议将页面实例放在 builder.load 函数中：

  var myComponentInstance = builder.load({
      path: "pages/product/product.component",
      name: "product_lists",
      page: myPage
  });
  

  然后在生成TabView UI时：

  let itemsArray = [];
  let tabView = new TabView();
  tabView.selectedColor = new Color("#000000");
  for (let i in someArray) {
      let tabEntry = {
          title: someArray[i],
          view: customView 
      };
      items.push(tabEntry);
  }
  tabView.items = items;
  

  回复于 2024-05-04T12:52:24+08:00
• 0

  如果您使用NativeScript Anguler2模板创建项目，则可以在TabView中加载自定义组件而不使用 builder.loade . 您可以查看以下附加示例，了解如何创建此类自定义组件并将其添加到 TabView 中 .

  product.component.ts

  import {Component, Input} from "@angular/core";
  
  
  @Component({
      selector: 'product-component',
      template: `
          <StackLayout>
              <Label [text]="data" class="name"></Label>
          </StackLayout>
      `
  })
  export class ProductComponent {
      @Input() data: string;
  }
  

  app.component.html

  <GridLayout>
      <TabView #tabView>
          <StackLayout *tabItem="{title: 'Tab1'}">
              <product-component data="Sample title" ></product-component>
          </StackLayout>
          <StackLayout *tabItem="{title: 'Tab2'}">
              <Label text="This is Label in Tab 2"></Label>
          </StackLayout>
      </TabView>
  </GridLayout>
  

  main.ts

  import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
  import { NgModule } from "@angular/core";
  import { AppComponent } from "./app.component";
  import {ProductComponent} from "./product.component"
  
  @NgModule({
      declarations: [AppComponent, ProductComponent],
      bootstrap: [AppComponent],
      imports: [NativeScriptModule],
  })
  class AppComponentModule {}
  
  platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
  

  重要的是在 main.ts 文件的声明中添加自定义组件 . 要在不同组件之间共享数据，可以在项目中使用 @Input() . 你可以阅读更多关于它的信息here

  回复于 2024-05-04T12:52:24+08:00