Typescript Angular 5 动态添加 css 到组件

Question

I have a really special issue. I am using AngularTS with C# on serverside and Typescript on clientside.

I want to add to our application the possibility, that the customer can add css styles in a textbox or add file locations (external).

In a custom component I want to add the html code from the official site of the customer. The customer should add the css files or text in order to show the content on our page like the content of the official site.

Unfortunately I could not find a possibility to add the css files.

@Component({
selector: 'customer-footer',
templateUrl: './customer-footer.component.html'
styleUrls: getCSS()})




export function getCSS(): string [] {
var styles: string[] = [];

styles.push("https://");

return styles;}

This doesn't work because AOT is not compatible with static refs.

I tried to add the css Content in styles Tag (Body-Area):

 <style type="text/css"> {{footerCSS}}</style>

My best result was to add a Object (css) in ngStyle to the displaying .

 <div *ngIf="!fixedBottom" [innerHtml]="footerHtml" [ngStyle]="footerCSS"></div>

Unfortunately I could not find a way to convert css code like this one:

 .flatWeatherPlugin { font-size: inherit; width: 100%; } .flatWeatherPlugin p, .flatWeatherPlugin h2, .flatWeatherPlugin h3, .flatWeatherPlugin ul, .flatWeatherPlugin li { padding: 0; margin: 0; color: inherit; }

To a functional object. Has someone an idea or a helpful message?

Answer 1

在打字稿中，您可以使用它来动态加载 css require('css/stylesheet.css')