Angular 2 - если присутствует строка запроса, загрузите другую таблицу стилей

Question

У меня есть приложение Angular 2 и вы хотите включить один из моих компонентов в виджет iframe, когда присутствует строка запроса widget=true. Когда эта строка присутствует, я хочу загрузить дополнительную таблицу стилей в компонент, чтобы немного изменить вид виджета. Это возможно? Как мне это сделать?

Просто для уточнения:

У меня есть компонент, который я использую в качестве обычной страницы, но хочу быть в состоянии иметь это как IFrame виджет тоже. Когда присутствует строка запроса widget=true, я буду знать, что страница находится в iframe. В этом случае я хочу загрузить дополнительную таблицу стилей в компонент

Answer 1

Ну, есть несколько способов.

Первый, очевидный и грязный, включает в себя стили как <style> тег с *ngIf, проверяя этот параметр в URL-адресе.

Во-вторых, то, что я считаю, лучше, это setting the style into styleUrls component meta property:

let styleUrls = []; 

if (window.location.href.contains('widget=true')) { 
    styleUrls.push('/path/to/style'); 
} 

@Component({ 
    selector: 'hero-app', 
    template: ` 
    <h1>Tour of Heroes</h1> 
    <hero-app-main [hero]=hero></hero-app-main>`, 
    stylesUrls: 
}) 
export class HeroAppComponent { 
/* . . . */ 
}