nativescript - NativeScript 2.0 カスタム コンポーネントと CSS

Question

NativeScript 2.0 CSS とカスタム コンポーネントに問題があります。私の知識には巨大なギャップがあるようで、明らかでない重要な何かが欠けています。

で作成された空の NS 2.0 アプリを取得します

$ tns create test --ng

app.cssの内容を削除します(副作用を防ぐため)。

app.component.ts を変更します。

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

@Component({
    selector: "my-app",
    template: `
    <StackLayout orientation="vertical">
        <Label text="Label in first StackLayout"></Label>
        <StackLayout orientation="vertical" 
                     style="width: 80%;background-color: red;">
            <Label text="Label in second StackLayout"></Label>
        </StackLayout>
    </StackLayout>
    `,

})
export class AppComponent {}

かなり基本的なもの。次の期待される結果が生成されます。

---

その内側の StackLayout を再利用可能なコンポーネントに変換してみましょう。

custom.component.ts

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

@Component({
    selector: "Custom",
    template: `
    <StackLayout orientation="vertical" 
                 style="width: 80%;background-color: red;">
        <Label text="Label in second StackLayout"></Label>
    </StackLayout>
    `,

})
export class CustomComponent {}

app.component.ts を変更します

import {Component} from "@angular/core";
import {CustomComponent} from "./custom.component"

@Component({
    selector: "my-app",
    directives: [CustomComponent],
    template: `
    <StackLayout orientation="vertical">
        <Label text="Label in first StackLayout"></Label>
        <Custom></Custom>
    </StackLayout>
    `,

})
export class AppComponent {}

出力は次のようになります。

背景色は適用されますが、幅は適用されません。

私も試しました：

<Custom style="width: 80%;"></Custom>  /* Does this even make sense? */

無駄に。

パーセンテージは実験的なものだと認識していますが、エラーは NativeScript ではなく私のコードにあると思われます。

どこで私は間違えましたか？