Angular 访问Nativescript自定义组件

我正在学习使用nativescript和angular2构建移动应用程序，并创建了一个名为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")
    } 
}

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();          
    }
  }
}

从“@angular/core”导入{Component，Renderer，ElementRef，OnInit，ViewChild}；
从“ui/Page”导入{Page}；
导入按钮模块=需要（“ui/按钮”）；
导入tabViewModule=require（“ui/选项卡视图”）；
从“ui/layouts/stack layout”导入{StackLayout}；
导入颜色模块=需要（“颜色”）；
var Color=colorModule.Color；
@组成部分({
选择器：“预订”，
templateUrl:“pages/booking/booking.html”，
样式URL:[“pages/booking/booking common.css”，“pages/booking/booking.css”]
})
导出类BookingComponent实现OnInit{
单向=真；
@ViewChild（“单向”）单向按钮：ElementRef；
@ViewChild（“往返”）往返按钮：ElementRef；
@ViewChild（“容器”）容器：ElementRef；
构造函数（专用页：页，el:ElementRef，呈现器：呈现器）{
renderer.setElementClass（el.nativeElement，'booking'，true）；
}    
恩戈尼尼特（）{
this.toggle（）；
this.hide（）；
}   
切换（）{
this.oneWay=！this.oneWay；
让oneWayButton=this.oneWayButton.nativeElement；
让roundTripButton=this.roundTripButton.nativeElement；
如果（这是单向的）{
oneWayButton.backgroundColor=新颜色（'#fb9900'）；
roundTripButton.backgroundColor=新颜色（'052c5b'）；
}
否则{
oneWayButton.backgroundColor=新颜色（'052c5b'）；
roundTripButton.backgroundColor=新颜色（'#fb9900'）；
}
}
隐藏（）{
让container=this.container.nativeElement；
容器设置（“可见性”、“折叠”）；
} 
show（）{
让container=this.container.nativeElement；
容器设置（“可见性”、“可见”）；
} 
getFromList（）{
警报（“来自列表”）；
}   
getToList（）{
警报（“待命名单”）
} 
}

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, 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")
    } 
}

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();          
    }
  }
}

从“@angular/core”导入{Component，ElementRef，OnInit，ViewChild}；
从“ui/Page”导入{Page}；
从“ui/layouts/stack layout”导入{StackLayout}；
导入颜色模块=需要（“颜色”）；
从“./booking/booking.component”导入{BookingComponent}
从“./Hello/Hello.component”导入{Hello}
从“ui/layouts/dock layout”导入{DockLayout}；
var Color=colorModule.Color；
@组成部分({
选择器：“主船坞”，
templateUrl:“pages/main/main.html”，
样式URL:[“pages/main/main common.css”，“pages/main/main.css”]，
})    
导出类MainComponent实现OnInit{
@ViewChild（“预订”）预订：ElementRef；
@ViewChild（“hello”）hello:ElementRef；
活动=本次预订；
构造函数（专用页：第页）{
}     
恩戈尼尼特（）{
this.page.actionBarHidden=true；
此项。切换选项卡（“预订”）；
}
开关选项卡（选项卡）{
设b=this.booking.nativeElement；
设h=this.hello.nativeElement；
如果（tab==“booking”&&this.active！=this.booking）{
h、 隐藏（）；
b、 show（）；
}
否则{
b、 隐藏（）；
h、 show（）；
}
}
}

---

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

我也有这个问题，我不知道是不是bug，但我找到了解决办法。 使用（已加载）事件，如下所示：

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

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

空载（预订）{
//预订等于此。预订。nativeElement
//你可以随意使用
}

相关问题：

更新：

---

我想你的问题是因为你调用了

this.switchTab（“预订”）

在

ngOnInit

中使用它在

ngAfterViewInit

中，但它可能会再次出现一些问题（请参见上面的链接），我上面提到的解决方案是我找到的最好的解决方案。

效果很好！非常感谢。我只是想知道this.booking.nativeElement是否不适用于自定义组件？另外，我应该仅在自定义组件中使用这种方式，还是应该进行概括，而完全不使用nativeElement？问题是在ngAfterViewInit中，当您使用booking.nativeElement.android属性时，android有时不可用（例如，当您路由到该组件时）但是如果你使用timeout，android将可用。所以你可以使用nativeElement，但你应该测试它是否真的有效，或者你应该使用timeout和。我想这是一只虫子。