Question

如果url中存在参数widget=true，我正在使用此函数向我的组件添加样式：

addStyleSheet() {
  var headID = document.getElementsByTagName('head')[0];
  var link = document.createElement('link');
  link.type = 'text/css';
  link.rel = 'stylesheet';
  link.id = 'widget_styles';
  headID.appendChild(link);

  link.href = './app/open-account/open-account-widget-styles.component.css';
}

它在Just In Time（JIT）中构建时效果很好，但在Ahead Of Time（AOT）中构建时不起作用。为什么这样，我该如何解决？

Answer 1

让我们用一个简单的例子来解释这一点。想象一下这是你的路线：

{ path: '/widget', component: WidgetComponent }

您可以使用以下代码导航到包含参数的路线：

this.router.navigate(
  ['/widget'], { queryParams: { widget: 'true' } }
);

这将产生以下URL /widget;widget=true注意：Angular使用分号分隔params而不是问号。

可以找到文档here

在你的组件中你可以得到这样的参数：

this.route
  .queryParams
  .subscribe(params => {
    this.widget = params['widget'] === 'true';
  });

此时，您的组件中有一个带变量的变量，您现在可以使用条件样式。

<div [ngClass]="{class_name: widget}">Lorum ipsum</div>

这样你就不会直接触摸DOM，而angular会处理所有事情。

Angular 2 - 样式在AOT构建中不起作用

1 个答案: