我在 nativescript 中管理 UI 跨 ng2 组件的引用

Question

我正在使用 Angular 构建一个 nativescript 移动应用程序 2. 我有一个 "page" 组件，其中包含一个 "section" 组件，其中包含一个 "button" 组件。我曾经只有一个组件，但现在将其全部分解，但是按钮有一个触发动画的点击处理程序，调用的函数如下所示：

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: Cannot read property 'style' of undefined

我已经完成了调试器，页面已定义，但是 getiewById 中的 none 正在工作，我想我得到了错误页面？但为什么 topmost() 不工作，或者其他可能有问题？

更新：

我也试过这种方法：

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: Cannot read property 'nativeElement' of undefined

Answer 1

要使用 View child，您需要先从核心导入 ElmentRef

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

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

@ViewChild('login') child: ElementRef;

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

希望对您有所帮助

我在 nativescript 中管理 UI 跨 ng2 组件的引用

I Managing UI references across ng2 components in nativescript

nativescript

angular

更新：

编辑：