如何解决Angular 8 使用通用组件加载两种不同的 CSS 和 HTML
我有在一个项目下实现两个不同主题的场景。我必须使用通用组件实现两种不同的 css 和 HTML。从单个组件调用两个不同的模板时,我在实现方面遇到了一些问题。
我在 angular.json 文件下划分了 CSS,如下所示。
angular.json
"styles": [
"src/custom-theme.scss",{
"input": "src/app1B.css","bundleName": "app1B","inject": false
},{
"input": "src/app2B.css","bundleName": "app2B","inject": false
}
],
App.component.ts :调用这些包名并加载受尊重的 CSS 文件。
ngOnInit(): void {
this.loadStyle('app1B.css','app1'); // Theme will be select dynamically.
//this.loadStyle('app2B.css','app2');
}
loadStyle(styleName: string,mod:string) {
const head = this.document.getElementsByTagName('head')[0];
// create link tag to load css
let themeLink = this.document.getElementById('client-theme') as HTMLLinkElement;
if (themeLink) {
// if the link is already exist,we just replace the link source
themeLink.href = styleName;
localStorage.setItem('theme',mod);
} else {
// if link doesn't exist,we create link tag
const style = this.document.createElement('link');
style.id = 'client-theme';
style.rel = 'stylesheet';
style.href = `${styleName}`;
head.appendChild(style);
localStorage.setItem('theme',mod);
}
}
Login.component.ts :这里的问题是我们如何在单个组件中加载两个不同的模板。我做错了什么还是有其他解决方案?请提出建议。
@Component({
selector: 'login-form',templateUrl: './app1login.component.html',//templateUrl: './app2login.component.html',})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。