Angular 2如何根据特定条件渲染动态模板

angular 2 how to render dynamic templateurl based on certain conditions

本文关键字：动态 特定条件 何根 Angular      更新时间：2023-09-26

是否有根据满足的特定条件在单个组件中呈现不同模板的例子?

给定路由'/app'，如果用户A登录，我想渲染组件/模板A，如果用户B登录，则渲染组件/模板B

对于这种方法，一个简单的解决方案就是在模板中使用expressions来显示不同的内容。

例如在你的组件中:

<div *ngIf="userLoggedIn">
  Something
</div>
<div *ngIf="!userLoggedIn">
  Something Else
</div>

还有一些其他的方法，比如在Angular 2中使用动态模板url，但它必须与你想要显示的内容有关。

如果你添加一个工作小提琴/例子，我可以更新我的答案进一步

1-安装此库

============================================================

2-在webpack。

配置使用HTML -loader
 { test: /'.html$/,  loaders: ['html-loader']   }

============================================================

3-如果你使用ionic，你可以从路径中复制webpack.config.js"node_modules/@ionic/app-scripts/config/webpack.config.js"然后将HTML加载器添加到其中

=============================================================

4-如果你使用离子在包中。Json添加以下行

"config": { 
    "ionic_bundler": "webpack",
    "ionic_webpack": "webpack.config.ionic.js" 
  },

=============================================================

@Component({
  selector: 'page-login',
 // templateUrl:"./login.html"
   template:     function(){
    if(globalVariables.test==2) {
      return require("./login2.html")
    }
    else
    {
      return require("./login.html")
    }
  }(),
})

======================================

如果require函数有无法解决的错误，你可以把它放在declarations.d.ts文件中，如下所示:
相关文章：