Пользовательские компоненты NativeScript 2.0 и CSS

У меня проблема с 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 .

Где я ошибся?


nativescript angular2-nativescript
person Wainage    schedule 08.06.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я просмотрел ваш код в данном фрагменте кода и обнаружил, что это может быть проблема с NativeScript. На данный момент изменение ширины StackLayout в вашем CustomView с использованием встроенного стиля будет работать только на Android. Чтобы изменить ширину вашего CustomView с помощью% для обеих платформ на данный момент, вы должны настроить это свойство в вашем css файле и привязать свойство cssClass.

custom.component.ts

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

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

})
export class CustomComponent {

      public styleView="customViewStyle";

}

app.css

.customViewStyle{
    width:80%;
}
person Nikolay Tsonev    schedule 09.06.2016
comment
Я только что проверил Android. Ты прав; работает отлично. К сожалению, я не могу заставить iOS измениться даже со стилем CSS (который все еще работает в Android). Спасибо за понимание - person Wainage; 09.06.2016
comment
Прошу прощения за задержку с ответом. Я провел небольшое исследование и отредактировал свой ответ выше. Возможным решением этой проблемы может быть привязка свойства cssClass, а затем установка имени класса. Я тестировал его как на iOS, так и на Android, и он должен нормально работать на обеих платформах. - person Nikolay Tsonev; 16.06.2016