Angular 2 - 如果存在查询字符串，加载另一个样式表

Question

我有一个 Angular 2 应用程序，并且想在存在查询字符串 widget=true 时将我的组件之一转换为 iframe 小部件。当此字符串存在时，我想将额外的样式表加载到组件中以稍微更改小部件视图。这可能吗？我该怎么做？

澄清一下：

我有一个用作常规页面的组件，但也希望能够将其用作 iframe 小部件。当查询字符串 widget=true 出现时，我将知道该页面位于 iframe 中。在这种情况下，我想向组件加载一个额外的样式表

Answer 1

好吧，有几种方法。

首先，显而易见且肮脏的是，将样式包含为 <style> 标记，并在 URL.

中检查此参数 *ngIf

其次，我觉得更好的是 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 {
/* . . . */
}

Angular 2 - 如果存在查询字符串，加载另一个样式表

Angular 2 - if query string present, load another stylesheet

widget

stylesheet

angular