NativeScript 在加载页面时无法获取或设置 UI 属性
NativeScript cannot get or set UI properties when page loaded
我正在使用 NativeScript 构建一个应用 Angular。我需要在加载页面时获取或设置 UI 组件的属性。但是，ngOnInit、ngAfterViewInit 或 (onloaded) 似乎不起作用。
我创建了一个 NativeScript 程序来演示这个问题。该程序有两页，每页有两个垂直堆叠的标签。当我按下每页上方的标签时，程序会加载另一页。在控制台中，它打印出标签的宽度 (label.getActualSize().width)。当我切换到另一页时，我可以看到标签的宽度没有问题。我得到的值是270。但是，我想要的是在加载页面时看到控制台打印出的宽度。
我从 .html[=66 中尝试了 ngAfterViewInit() 和 (loaded) =] 文件，但它们似乎不起作用。它给了我 0。我的猜测是我得到这个值是因为 NativeScript 在加载所有组件之前给了我宽度值。我需要解决这个问题。
这是我的 page_2.component.ts 代码，其中包含主要测试部分：
import {Component, ViewChild, ElementRef, OnInit} from "@angular/core";
import {Router} from "@angular/router-deprecated";
import {Page} from "ui/page";
import {Label} from "ui/label";
@Component({
selector: "page2",
templateUrl: "pages/page_2/page_2.html",
styleUrls: ["pages/page_2/page_2-common.css", "pages/page_2/page_2.css"]
})
export class Page2 implements OnInit {
@ViewChild("label_in_2") label_in_2: ElementRef;
constructor(private _router: Router, private page: Page) {}
ngOnInit() {
}
ngAfterViewInit() {
let label = <Label>this.label_in_2.nativeElement;
console.log("width of the label 2 in ngAfterViewInit: " + label.getActualSize().width); // this gives me 0.
}
whatisthewidth(testLabel) {
// let test = testLabel.nativeElement;
// testLabel.
console.log("width of the label 2 in whatisthewidth: " + testLabel.getActualSize().width); // this gives me 0.
}
to_page1() {
let label = <Label>this.label_in_2.nativeElement;
console.log("width of the label 2: " + label.getActualSize().width); // this gives me 270.
console.log("to page 1");
this._router.navigate(["Page1"]);
}
}
为了完整起见，让我附上程序的其他部分。
main.ts
import {nativeScriptBootstrap} from "nativescript-angular/application";
import {AppComponent} from "./app.component";
nativeScriptBootstrap(AppComponent);
app.component.ts
import {Component} from "@angular/core";
import {HTTP_PROVIDERS} from "@angular/http";
import {RouteConfig} from "@angular/router-deprecated";
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router";
import {Page1} from "./pages/page_1/page_1.component";
import {Page2} from "./pages/page_2/page_2.component";
@Component({
selector: "main",
directives: [NS_ROUTER_DIRECTIVES],
providers: [NS_ROUTER_PROVIDERS, HTTP_PROVIDERS],
template: "<page-router-outlet></page-router-outlet>"
})
@RouteConfig([
{ path: "/Page1", component: Page1, name: "Page1" },
{ path: "/Page2", component: Page2, name: "Page2", useAsDefault: true }
])
export class AppComponent { }
app.css
button, label, stack-layout {
horizontal-align: center;
}
button {
font-size: 36;
}
.title {
font-size: 30;
margin: 20;
}
.message {
font-size: 20;
color: #284848;
text-align: center;
margin: 0 20;
}
.button_label {
background-color: gray;
width: 75%;
height: 25%;
}
page_1.component.ts
import {Component, ViewChild, ElementRef, OnInit} from "@angular/core";
import {Router} from "@angular/router-deprecated";
import {Page} from "ui/page";
import {Label} from "ui/label";
@Component({
selector: "page1",
templateUrl: "pages/page_1/page_1.html",
styleUrls: ["pages/page_1/page_1-common.css", "pages/page_1/page_1.css"]
})
export class Page1 {
@ViewChild("label_in_1") label_in_1: ElementRef;
constructor(private _router: Router, private page: Page) {}
to_page2() {
let label = <Label>this.label_in_1.nativeElement;
console.log("width of the label 1: " + label.getActualSize().width);
console.log("to page 2");
this._router.navigate(["Page2"]);
}
}
page_1.html
<StackLayout>
<Label text="to page 2" class="button_label" (tap)="to_page2()"></Label>
<Label #label_in_1 text="second label" class="test_label"></Label>
</StackLayout>
page_1-common.css
Label.test_label {
background-color: blue;
width: 75%;
height: 20%;
}
page_2.html
<StackLayout>
<Label text="to page 1" class="button_label" (tap)="to_page1()"></Label>
<Label #label_in_2 text="second label" class="test_label" (loaded)="whatisthewidth(label_in_2)"></Label>
</StackLayout>
page_2.common.css
Label.test_label {
background-color: yellow;
width: 75%;
height: 20%;
}
如有任何建议或见解，我们将不胜感激。
我认为这个问题与 this Github 问题有关
我不知道 Github 上的问题是如何在问题仍然存在的情况下被解决方法视为关闭的。超时的解决办法就是等到DOM加载完成，如果从templateURL加载时间会更长，所以没时间加。
我正在使用 NativeScript 构建一个应用 Angular。我需要在加载页面时获取或设置 UI 组件的属性。但是，ngOnInit、ngAfterViewInit 或 (onloaded) 似乎不起作用。
我创建了一个 NativeScript 程序来演示这个问题。该程序有两页，每页有两个垂直堆叠的标签。当我按下每页上方的标签时，程序会加载另一页。在控制台中，它打印出标签的宽度 (label.getActualSize().width)。当我切换到另一页时，我可以看到标签的宽度没有问题。我得到的值是270。但是，我想要的是在加载页面时看到控制台打印出的宽度。
我从 .html[=66 中尝试了 ngAfterViewInit() 和 (loaded) =] 文件，但它们似乎不起作用。它给了我 0。我的猜测是我得到这个值是因为 NativeScript 在加载所有组件之前给了我宽度值。我需要解决这个问题。
这是我的 page_2.component.ts 代码，其中包含主要测试部分：
import {Component, ViewChild, ElementRef, OnInit} from "@angular/core";
import {Router} from "@angular/router-deprecated";
import {Page} from "ui/page";
import {Label} from "ui/label";
@Component({
selector: "page2",
templateUrl: "pages/page_2/page_2.html",
styleUrls: ["pages/page_2/page_2-common.css", "pages/page_2/page_2.css"]
})
export class Page2 implements OnInit {
@ViewChild("label_in_2") label_in_2: ElementRef;
constructor(private _router: Router, private page: Page) {}
ngOnInit() {
}
ngAfterViewInit() {
let label = <Label>this.label_in_2.nativeElement;
console.log("width of the label 2 in ngAfterViewInit: " + label.getActualSize().width); // this gives me 0.
}
whatisthewidth(testLabel) {
// let test = testLabel.nativeElement;
// testLabel.
console.log("width of the label 2 in whatisthewidth: " + testLabel.getActualSize().width); // this gives me 0.
}
to_page1() {
let label = <Label>this.label_in_2.nativeElement;
console.log("width of the label 2: " + label.getActualSize().width); // this gives me 270.
console.log("to page 1");
this._router.navigate(["Page1"]);
}
}
为了完整起见，让我附上程序的其他部分。
main.ts
import {nativeScriptBootstrap} from "nativescript-angular/application";
import {AppComponent} from "./app.component";
nativeScriptBootstrap(AppComponent);
app.component.ts
import {Component} from "@angular/core";
import {HTTP_PROVIDERS} from "@angular/http";
import {RouteConfig} from "@angular/router-deprecated";
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router";
import {Page1} from "./pages/page_1/page_1.component";
import {Page2} from "./pages/page_2/page_2.component";
@Component({
selector: "main",
directives: [NS_ROUTER_DIRECTIVES],
providers: [NS_ROUTER_PROVIDERS, HTTP_PROVIDERS],
template: "<page-router-outlet></page-router-outlet>"
})
@RouteConfig([
{ path: "/Page1", component: Page1, name: "Page1" },
{ path: "/Page2", component: Page2, name: "Page2", useAsDefault: true }
])
export class AppComponent { }
app.css
button, label, stack-layout {
horizontal-align: center;
}
button {
font-size: 36;
}
.title {
font-size: 30;
margin: 20;
}
.message {
font-size: 20;
color: #284848;
text-align: center;
margin: 0 20;
}
.button_label {
background-color: gray;
width: 75%;
height: 25%;
}
page_1.component.ts
import {Component, ViewChild, ElementRef, OnInit} from "@angular/core";
import {Router} from "@angular/router-deprecated";
import {Page} from "ui/page";
import {Label} from "ui/label";
@Component({
selector: "page1",
templateUrl: "pages/page_1/page_1.html",
styleUrls: ["pages/page_1/page_1-common.css", "pages/page_1/page_1.css"]
})
export class Page1 {
@ViewChild("label_in_1") label_in_1: ElementRef;
constructor(private _router: Router, private page: Page) {}
to_page2() {
let label = <Label>this.label_in_1.nativeElement;
console.log("width of the label 1: " + label.getActualSize().width);
console.log("to page 2");
this._router.navigate(["Page2"]);
}
}
page_1.html
<StackLayout>
<Label text="to page 2" class="button_label" (tap)="to_page2()"></Label>
<Label #label_in_1 text="second label" class="test_label"></Label>
</StackLayout>
page_1-common.css
Label.test_label {
background-color: blue;
width: 75%;
height: 20%;
}
page_2.html
<StackLayout>
<Label text="to page 1" class="button_label" (tap)="to_page1()"></Label>
<Label #label_in_2 text="second label" class="test_label" (loaded)="whatisthewidth(label_in_2)"></Label>
</StackLayout>
page_2.common.css
Label.test_label {
background-color: yellow;
width: 75%;
height: 20%;
}
如有任何建议或见解，我们将不胜感激。
我认为这个问题与 this Github 问题有关
我不知道 Github 上的问题是如何在问题仍然存在的情况下被解决方法视为关闭的。超时的解决办法就是等到DOM加载完成，如果从templateURL加载时间会更长，所以没时间加。