Как стилизовать отдельные страницы в Angular NativeScript?

nativescript angular2-nativescript

956 просмотра

2 ответа

Я создаю приложение NativeScript с Angular2 и тем, и я хочу по-разному стилизовать каждую страницу с помощью уникального фонового изображения и т. Д. Я не могу настроить таргетинг на элемент «Страница» в отдельных файлах component.css, но могу ориентироваться на страницу в мастер app.cssфайл. Проблема в том, что устанавливает стиль для каждой страницы. Я хочу, чтобы они были уникальными.

Взлом, который я выяснил сейчас, заключается в использовании this.page.setInlineStyle('background-color: purple;');внутри ngOnInit()функции в каждом компоненте.

Есть ли способ просто нацелить страницы из отдельных маршрутов из app.cssфайла?

Автор: Colin Skow Источник Размещён: 08.11.2019 11:12

Ответы (2)


3 плюса

Решение

Мой предпочтительный подход заключается в том, чтобы получить ссылку на обработчик <Page>in ngOnInit()и применить имя класса CSS, которое я могу использовать в качестве хука стиля в моем app.cssфайле. Так, например:

// my-page.component.ts
import { Component, OnInit } from "@angular/core";
import { Page } from "ui/page";

@Component({ ... })
export class MyPage implements OnInit {
  constructor(private page: Page) {}
  ngOnInit() {
    this.page.className = "my-page";
  }
}

/* app.css */
.my-page {
  background-color: yellow;
}

Я делаю это в примере с NativeScript Groceries, если вы ищете полнофункциональное решение. См. Https://github.com/NativeScript/sample-Groceries/blob/9eb6fea66e3912878815b86aa5ce7b812e22eac5/app/groceries/groceries.component.ts#L36 и https://github.com/NativeScript/sample-Groceries/blobe869126b6. /app.css#L7-L12 .

Автор: TJ VanToll Размещён: 22.08.2016 01:22

0 плюса

Это работает для меня (в NativeScript), я обычно делаю это в Angular для веб:

/deep/ Page {
  background: #whatever;
}
Автор: Donovant Размещён: 29.07.2017 04:03
Вопросы из категории :
32x32