我在nativescript

Question

我正在使用Angular 2构建一个nativescript移动应用程序。我有一个“页面”组件，其中包含一个“section”组件，其中包含一个“按钮”组件。我曾经只有一个组件，但是我把它全部打破了，然而，按钮有一个触发动画的单击处理程序，调用的函数是这样的：

export function socialAnimate(page, clicked) {
    var google = page.getViewById("google");
}

按钮组件将其调用为：

@Component({
    selector: "button",
    template: `<Button row="8" col="2" icon="res://key" class="login" rippleColor="#f1f1f1" (tap)="socialClick()"></Button>`,
    styleUrls: ["Components/Button/login.css"],
    directives: []
})
export class Button implements OnInit {

    page: Page;

    loginClicked: boolean = false;

    ngOnInit() {
        this.page = <Page>topmost().currentPage;
    }
    socialClick() {
        this.loginClicked = socialAnimate(this.page, this.loginClicked);
    }
}

但是，重构代码以生成这些子组件后，我收到错误：

  

TypeError：无法读取未定义的属性“样式”

我已经使用了调试器，页面被定义了，但getiewById没有一个正在工作，我认为我得到的是错误的页面？但为什么最顶层（）不起作用，或者其他可能是错误的？

更新

我也试过这种方法：

export class PageCmp {
    page: Page;
    ngOnInit() {
        this.page = <Page>topmost().currentPage;
        this.page.actionBarHidden = true;
    }
    @ViewChild(Button) child: Button;

    ngAfterViewInit() {
        this.child.setPage(this.page);
    }
}

然后在我的按钮组件中添加了函数：

setPage(page: Page) {
    this.page = page;
}

编辑：

所以我现在有了这个按钮组件：

import {Component, ViewChild, ElementRef} from "@angular/core";

@Component({
    selector: "button",
    template: `<FAB row="8" col="2" icon="res://google" class="fab-button" id="google" rippleColor="#f1f1f1" (tap)="login('Google')"></FAB>`,
    directives: []
})
export class Button {

    @ViewChild('google') google: ElementRef;

    socialClick() {

        if (this.loginClicked == false) {
            this.google.nativeElement.style.opacity = 1;
        }

        this.loginClicked = !this.loginClicked;

    }
}

然而，@ViewChild('google') google: ElementRef;因此我收到错误：

  

TypeError：无法读取未定义

的属性“nativeElement”

Answer 1

要使用View子，您需要先从核心

导入ElmentRef

import {ElementRef} from "@angular/core";

您的所有@ViewChild都必须是ElmentRef类型，然后才能访问您需要使用nativeElement的实际元素

@ViewChild('login') child: ElementRef;

ngAfterViewInit() {
    let view = this.child.nativeElement;
}

希望有所帮助