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与自定义组件一起使用时，它返回undefined;因此我不能使用自定义组件方法。谁能告诉我我做错了什么？

Answer 1

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

Option Explicit

Private Sub Worksheet_Calculate()
Dim s As String
Dim ws As Worksheet
Dim wsi As Worksheet

Set wsi = Sheets("Sheet4")' You need to create a name for the sheet to paste into

For Each ws In ActiveWorkbook.Worksheets
If Not IsEmpty(ws.Range("A1")) and ws.name = "INDEXCOPY" Then
     ws.Name = ws.Range("A1").Value
     ws.Range("A1:" & ws.Range("A1").SpecialCells(xlCellTypeLastCell).Address).Copy _
     Destination:=wsi.Range("A1")
End If
Next ws
End Sub

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

更新：我认为您的问题是因为您在<booking #booking (loaded) =onLoaded(booking)></booking> onLoaded(booking){ //booking is equal to this.booking.nativeElement //you can use it as you like }中调用this.switchTab("booking");在ngOnInit中使用它，但它可能会再次出现问题（请参阅上面的链接）我上面提到的解决方案是最好的解决方案我找到。

访问Nativescript自定义组件

1 个答案: