Question

是否有任何示例可以根据满足的某些条件在单个组件中呈现不同的模板？

给定路线＆＃39; / app＆＃39;，我想在用户A登录时渲染组件/模板A，如果用户B登录则渲染组件/模板B

Answer 1

此方法的一个简单解决方案就是在模板中使用expressions以显示不同的内容。

例如，在您的组件中：

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

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

在这个问题Dynamic template URLs in Angular 2中有一些其他麻烦的方法，但它与你想要展示的内容有关。

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

Answer 2

1-安装此库

npm i -D html-loader

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

2-在webpack.config中使用html-loader获取html文件

 { test: /\.html$/,  loaders: ['html-loader']   }

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

3-如果使用ionic，则可以从路径中复制webpack.config.js “node_modules/@ionic/app-scripts/config/webpack.config.js” 然后将html加载器添加到它

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

4 - 如果你使用离子在package.json中添加这些行

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

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

5 - 然后你可以使用它如下

@Component({
  selector: 'page-login',
 // templateUrl:"./login.html"

   template:     function(){
    if(globalVariables.test==2) {

      return require("./login2.html")
    }
    else
    {
      return require("./login.html")
    }
  }(),
})

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

6 - 如果require函数有未解决的错误，你可以把它放在declarations.d.ts文件中，如下所示：

声明var require：any;

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

2 个答案: