Question

是否可以动态地将样式表中的url注入组件？

类似的东西：

styleUrls: [
  'stylesheet1.css',
  this.additionalUrls
]

或（一厢情愿并注意这只是假代码）：

export class MyComponent implements dynamicUrls {

  ngDynamicUrls() {
    this.inject(['anotherStylesheet.css', 'anotherStylesheet2.css']);
  }
}

因为如果您无法访问stylesheet1中的某些样式，那么您应该如何做到这一点？我唯一的想法就是以某种方式拥有动态styleUrls，但我不认为这甚至可以从我能找到的东西中获得。

有什么想法吗？

Answer 1

有可能以某种方式破解它对我有用。您可以操作Angular 2 Component装饰器，创建自己的装饰器并使用您的属性返回Angular的装饰器。

  import { Component } from '@angular/core';

    export interface IComponent {
      selector: string;
      template?: string;
      templateUrl?: string;
      styles?: string[];
      styleUrls?: string[];
      directives?: any;
      providers?: any;
      encapsulation?: number;
    }

    export function CustomComponent( properties: IComponent): Function {
      let aditionalStyles: string;

      try {
          aditionalStyles =  require(`path to aditional styles/${ properties.selector }/style/${        properties.selector }.${ GAME }.scss`);
          properties.styles.push(aditionalStyles);
        } catch (err) {
          console.warn(err)
        }
      }

      return Component( properties );
    }

在你的组件中用新的替换默认的角度2 @Component。

import { CustomComponent } from 'path to CustomComponent';

@CustomComponent({
  selector: 'home',
  templateUrl: './template/home.template.html',
  styleUrls: [ './style/home.style.scss']
})
export class ......

Answer 2

我找到了解决方法：
1.我已在组件装饰器中将styleurls更改为样式。
2.我将获取变量。
3.我将在装饰器中使用require命令。

import { Component } from '@angular/core';
import { environment } from '../environments/environment';
let lang = environment['lang'];

@Component({
   selector: 'app',
   templateUrl: './app.component.html',
   styles: [require('./app.component.css'), require('./app.component.' + lang + '.css')]
  })

  export class AppComponent {

   constructor() { }

  }

在这个基本示例中，我导入了环境变量并动态更改了CSS字符串。

Answer 3

我过去一直需要动态地将url注入样式表，并最终为每个变量css（在我的情况下为3个不同的样式）初始化一个组件，并使用空模板在我的应用程序组件中使用ngIf条件。< / p>

由于使用了属性＆＃34;封装：ViewEncapsulation.None＆＃34;，所选组件的样式随后被添加到页面的标题中，并且能够为整个页面获取正确的渲染器。 / p>

Answer 4

我使用带有ngIf条件的html模板中的样式表链接，它对我有效。

public void fillDataGridView()
{
    using (SqlConnection connection = new SqlConnection(yourConnectionString))
        {
            using (SqlCommand scmd = new SqlCommand("[dbo].[GetIDbyID]", connection))
            {
                connection.Open();
                scmd.CommandType = CommandType.StoredProcedure;
                scmd.Parameters.AddWithValue("@childname", comboBox.SelectedValue); //add as many parameters as you need
                SqlDataAdapter sda = new SqlDataAdapter(scmd);
                DataTable dt = new DataTable();
                sda.Fill(dt);
                connection.Close();
                dataGridView.DataSource = dt;
                dataGridView.AutoResizeColumns(DataGridViewAutoSizeColumnsMode.AllCells); //this just autosizes the columns to their contents and is optional
            }
        }
}

动态styleUrls在角度2？

4 个答案: