Question

我的应用使用不同的语言，其中一些是从右到左。我有两个单独的CSS文件;一个用于LTR，另一个用于RTL。

如何在组件上有条件地添加css文件？

我找到了解决此问题的方法（请参阅github issue上的回答），但这不是一个好的解决方案。

正如您将在下面看到的，解决此问题的代码就在这里。

app.component.ts

@Component({
  selector: 'ngw-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  isRtl:Boolean;

  constructor(@Inject(LOCALE_ID) localeId) {
    if(localeId == "fa-IR") {
      require('style-loader!./app.component.rtl.css');
    }
  }

  ngOnInit() {}
}

typings.d.ts

declare var require: any;

我在寻找什么：

theme.ts

interface Theme {
  url: string;
  rel: string;
  media: string;
}

app.component.ts

@Component({
  selector: 'ngw-root',
  templateUrl: './app.component.html',
  styleUrls: AppComponentThemeProvider
})
export class AppComponent implements OnInit {
  constructor() {
  }

  ngOnInit() {}
}

app.component.theme.ts

export class AppComponentThemeProvider {
  constructor(@Inject(LOCALE_ID) private localeId) {
  }

  getThemes() {
    let themes = [<Theme>{url:'./app.component.css'}];

    if(this.localeId == 'fa-IR') {
      themes.push(<Theme>{url: './app.component.rtl.css'})
    }

    return themes;
  }
}

Answer 1

据我所知，这在Angular中并不容易实现，而且，浏览器的行为方式是，只要您下载CSS，它们就会在那里，直到您关闭浏览器或删除风格，这很棘手。

最简单，最安全的选择是命名css文件并有条件地将该命名空间添加到您的身体。

LTR样式：

 app-root.LTR{
    all your LTR styles will be here
 }

RTL样式：

  app-root.RTL{
    all your RTL styles will be here
 }

然后在您的app-root组件中

@Component({
    selector:'app-root'

})

export class AppComponent{

      @HostBinding('[class.RTL]') get language(){


      if  it should be RTL   return true;

     }

      @HostBinding('[class.LTR]') get language(){


         if  it should be LTR   return true;

     }


// I'm not sure how would you determine which language is it gonna be, but it's normally a parameter in the url , so you can use Angular's router to detect that and flesh out the above if conditions

}

如何在angular 2组件上有条件地添加不同的css文件？

1 个答案: