Стиль html, корпус из веб-компонента (Угловой 2)

Я работаю над LoginComponent в Angular 2, который должен «пересоздать» теги html и body, поэтому я могу поместить фоновое изображение для страницы входа.Стиль html, корпус из веб-компонента (Угловой 2)

Но просто добавление стиля для html, body в мой login.css не работает.

Есть ли способ переопределить стиль на html, body с помощью компонента? Или любой элемент в этом отношении.

Я пытался что-то вроде:

:host(.btn) { ... } 
:host(.btn:host) { ... } 
.btn:host { ... }

стилизовать элемент снаружи Login компонента. Но ничего не работает.

источник

2016-01-19 Vivendi

Это только мое личное мнение, но почему бы вам просто не добавить класс, который был включен в тело, или что-то в этом роде, и добавить стили CSS, специфичные для этого класса, переопределить обычные, это кажется более каскадным, чем переопределение стили внутри каждого компонента. – Langley

Вы можете попробовать

body { 
    /* body styles here */ 
}

, но стили в компонентах не должны применяться к элементам вне себя.

Другой способ - использовать body в качестве селектора в вашем основном компоненте и использовать привязку хоста для установки/удаления класса CSS в теле, чтобы добавить CSS в ваш индекс index.html.

@Component({ 
    selector: "body", 
    host: { 
    "[class.some-class]":"someClass" 
    }, 
}) 
export class AppComponent { 
    constructor(private loginService: LoginService) { 
    loginService.isLoggedInChanged.subscribe((value) => { 
     this.someClass = value; 
    }); 
    } 
    someClass: bool = false; 
}

при установке someclass к истинным (usind некоторые привязки к службе, класс добавляется к телу.

Если вы не хотите, чтобы добавить CSS в глобальном масштабе можно также привязать к стилю приписывать непосредственно

@Component({ 
    selector: "body", 
    host: { 
    "[style.background-image]":"bodyBackgroundImage()" 
    }, 
}) 
export class AppComponent { 
    bool isLoggedIn = false; 
    constructor(private loginService: LoginService) { 
    loginService.isLoggedInChanged.subscribe((value) => { 
     this.isLoggedIn = value; 
    }); 
    } 
    function bodyBackgroundImage() { 
    return this.isLoggedIn ? 'url("gradient_bg.png")': 'none'; 
    } 
}

обновление

DomAdapter ушел. Renderer2 должны обеспечивать аналогичную функциональность.

Путь к стилю <body> непосредственно из компонента входа в систему является использование DomAdapter (см также https://github.com/angular/angular/issues/4942)

System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) { browser_adapter.BrowserDomAdapter.makeCurrent(); }) ... _dom: DomAdapter = new BrowserDomAdapter(); _dom.setStyle(_dom.query('body'), 'padding', '50px');

источник

2016-01-20 05:53:56

похоже, что телеселектор не разрешен (больше), цитируя себя (https://stackoverflow.com/questions/41249161/how-to-change-class-of-body-in-angular2typescript-project). Таким образом, третий решение, которое вы предлагаете здесь, является единственным возможным? – simne7

Селектор тела, похоже, работает https://stackblitz.com/edit/angular-hnwzgc –

thx для примера .. мой linter тем не менее говорит мне, что использование селектора body не является правильным (однако приложение строит).http://codelyzer.com/rules/component-selector/ ссылается на некоторые угловые рекомендации. Я думаю, что я буду жить с ошибкой linter. – simne7

Необходимо изменить способ использования компонента css с помощью ViewEncapsulation. По умолчанию он установлен в Emulated и угловой волю

добавить атрибут, содержащий суррогатной идентификатор и предварительно обработать правила стиля

Чтобы изменить это поведение import ViewEncapsulation from 'angular2/core' и использовать его в метаданных компоненты:

@Component({ 
    ... 
    encapsulation: ViewEncapsulation.None, 
    ... 
})

источник

2016-01-20 04:34:55 Sasxa

Это работало для меня и намного лучше, чем тот, который был отмечен как ответ. Благодарю. – Roet

Спасибо за это! Это должен быть принятый ответ. – hartz89

+13

Исправьте меня, если я ошибаюсь, но это не позволило бы изменять глобальные (теги) на каждый компонент, не так ли? Это просто добавит css в приложение, и оно всегда будет там, даже если загружен другой компонент. – TehOne

Лучше, чтобы добавить файл CSS на корневом уровне и настройте его в angular-cli.json ИЛИ добавьте его в index.html.поэтому вы можете написать свой сброс и глобальные стили, и не нужно беспокоиться о теневом доме и других концепциях.

источник

2017-04-28 13:50:14

Я только что отредактировал файл styles.scss, и это сработало для меня.

источник

2017-05-17 08:50:51 Omer

Это правильный способ добавления глобальных стилей. – Loolooii

но условный? –

@BenTaliadoros Пожалуйста, объясните, что вы подразумеваете под условным обозначением? Условия стиля обычно записываются внутри [ngClass] или [ngStyle]. Но у меня такое чувство, что ты говоришь о чем-то другом. – Omer

Я не уверен, что это именно то, что вы ищете, но это не оставит вас с постоянно измененным фоном.

Вот как я сделал это для чего-то подобного. Если tou хочет воздействовать на фоновое изображение тела только для этой страницы, это может сработать. (Я не тестировал это полностью, но, похоже, работает в браузерах Windows.)

Внутри вашего компонента вы можете просто работать непосредственно через DOM при создании компонента. Когда он будет уничтожен, вы можете отменить изменение.

export class SpecialBackground { 
    constructor(){ 
    document.body.style.backgroundImage = "url('path/to/your/image.jpg')"; 
    document.body.style.backgroundPosition = "center center"; 
    document.body.style.backgroundRepeat = "no-repeat"; 
    document.body.style.backgroundAttachment = "fixed"; 
    document.body.style.backgroundSize = "cover"; 
    } 
    ngOnDestroy(){ 
    document.body.style.backgroundImage = "none"; 
    } 
}

Для ваших целей вы можете использовать различные функции (а не конструктор), когда вы нажата кнопка, и вы должны хорошо идти.

источник

2017-05-29 04:13:44 jfgrissom

я имел такую же проблему с маржинальной верхом, как я установил это

constructor(
    private _renderer: Renderer2, 
) { 
    this._renderer.removeStyle(document.body, 'margin-top'); 
}

Это работало отлично для меня.

источник

2017-10-10 14:32:32 Skeptor

Путь я использовал это

constructor() { 
    document.body.className = "bg-gradient"; 
    } 

ngOnDestroy(){ 
    document.body.className=""; 
    }

Это будет динамически добавлять и удалять стиль из тела для конкретного компонента.

источник

2017-12-16 10:27:06

Стиль html, корпус из веб-компонента (Угловой 2)

ответ

Смежные вопросы