访问 Nativescript 自定义组件

Question

我正在学习使用带有 angular2 的 nativescript 构建移动应用程序，并且我创建了一个名为 booking 的自定义组件。我正在从另一个名为 main 的组件访问此自定义组件，如这些文件所示。

booking.component.ts

import { Component, Renderer, ElementRef, OnInit, ViewChild} from "@angular/core";
import { Page } from "ui/page";
import buttonModule = require("ui/button");
import tabViewModule = require("ui/tab-view");
import {StackLayout} from "ui/layouts/stack-layout"; 


import colorModule = require("color");
    var Color = colorModule.Color;

@Component({
  selector: "booking",
  templateUrl: "pages/booking/booking.html",
  styleUrls: ["pages/booking/booking-common.css", "pages/booking/booking.css"]
})

export class BookingComponent  implements OnInit   {
    oneWay = true;
    @ViewChild("oneWay") oneWayButton: ElementRef;
    @ViewChild("roundTrip") roundTripButton: ElementRef;
    @ViewChild("container") container: ElementRef;




  constructor(private page: Page, el: ElementRef, renderer: Renderer) {
        renderer.setElementClass(el.nativeElement, 'booking', true);
  }    

    ngOnInit() {
    this.toggle();
    this.hide();
    }   
    toggle(){
        this.oneWay = !this.oneWay;
        let oneWayButton = <buttonModule.Button>this.oneWayButton.nativeElement;
        let roundTripButton = <buttonModule.Button>this.roundTripButton.nativeElement;            
        if(this.oneWay){
             oneWayButton.backgroundColor = new Color('#fb9900');
             roundTripButton.backgroundColor = new Color('#052c5b');
        }
        else{
             oneWayButton.backgroundColor = new Color('#052c5b');
             roundTripButton.backgroundColor = new Color('#fb9900');            
        }
    }

    hide(){
        let container = <StackLayout>this.container.nativeElement;        
        container.set("visibility","collapsed");        
    } 
    show(){
        let container = <StackLayout>this.container.nativeElement;        
        container.set("visibility","visible");        
    } 

    getFromList(){
        alert("from list");
    }   
    getToList(){
        alert("to list")
    } 
}

main.html

  <DockLayout #dock width="100%" height="100%"  stretchLastChild="false"

      loaded="pageLoaded" 
  >
    <GridLayout columns="*,*,*,*" rows="auto, auto" width="100%" height="auto" class="tabs"  dock="bottom">
        <StackLayout  row = "0" rowSpan = "1" col = "0" colSpan="4" class="dockBorder"></StackLayout>
        <StackLayout (tap)="switchTab('booking')" row = "1" rowSpan = "1" col = "0" colSpan="1" class="tab">
           <StackLayout class="tabBar activeBar"></StackLayout> 
            <Image class = "tabIcon" src="~/images/bus.png" ></Image>
            <Label text="Booking" class="tabLabel activeLabel"></Label>         
        </StackLayout>
        <StackLayout (tap)="switchTab('hello')" row = "1" rowSpan = "1" col = "1" colSpan="1" class="tab">
           <StackLayout class="tabBar"></StackLayout> 
            <Image class = "tabIcon" src="~/images/bus.png" ></Image>
            <Label text="Booking" class="tabLabel"></Label>         
        </StackLayout>  
        <StackLayout row = "1" rowSpan = "1" col = "2" colSpan="1" class="tab">
           <StackLayout class="tabBar"></StackLayout> 
            <Image class = "tabIcon" src="~/images/bus.png" ></Image>
            <Label text="Booking" class="tabLabel"></Label>         
        </StackLayout>  
        <StackLayout row = "1" rowSpan = "1" col = "3" colSpan="1" class="tab">
           <StackLayout class="tabBar"></StackLayout> 
            <Image class = "tabIcon" src="~/images/bus.png" ></Image>
            <Label text="Booking" class="tabLabel"></Label>         
        </StackLayout>                        
    </GridLayout>
    <StackLayout>
    </StackLayout>
    <hello id="hello" #hello></hello>
    <booking #booking></booking>

  </DockLayout>

main.component.ts

import { Component, ElementRef, OnInit, ViewChild} from "@angular/core";
import { Page } from "ui/page";
import {StackLayout} from "ui/layouts/stack-layout"; 
import colorModule = require("color");
import {BookingComponent} from "../booking/booking.component"
import {Hello} from "../hello/hello.component"
import {DockLayout} from  "ui/layouts/dock-layout"; 
var Color = colorModule.Color;   
@Component({
  selector: "main-dock",
  templateUrl: "pages/main/main.html",
  styleUrls: ["pages/main/main-common.css", "pages/main/main.css"],
})    
export class MainComponent implements OnInit{
  @ViewChild("booking") booking: ElementRef;
  @ViewChild("hello") hello: ElementRef;
  active = this.booking;
  constructor(private page: Page) {
  }     
  ngOnInit() {
    this.page.actionBarHidden = true;
    this.switchTab("booking");    
  }

  switchTab(tab){
    let b = <BookingComponent>this.booking.nativeElement;
    let h = <Hello>this.hello.nativeElement;  
    if(tab ==="booking" && this.active != this.booking){          
         h.hide();
         b.show();                  
    }
    else{         
         b.hide();
         h.show();          
    }
  }
}

一切正常，但问题是当将 nativeElement 与自定义组件一起使用时，它 returns 未定义；因此我不能使用自定义组件方法。有人可以告诉我我做错了什么吗？

Answer 1

我也有这个问题，我不知道它是不是错误，但我找到了解决方案。像这样使用（加载）事件：

   <booking #booking (loaded) =onLoaded(booking)></booking>

   onLoaded(booking){
          //booking is equal to this.booking.nativeElement
          //you can use it as you like
   }

相关问题： https://github.com/NativeScript/nativescript-angular/issues/406

更新：我认为你的问题是因为你在ngOnInit中调用了this.switchTab("booking");，在ngAfterViewInit中使用了它，但它可能又出现了一些问题（见上面的link）我上面提到的解决方案是我找到的最佳解决方案。

访问 Nativescript 自定义组件

Accessing Nativescript custom components

typescript

nativescript

angular