如何显示/隐藏子组件

时间:2016-11-11 11:01:07

标签: angular

我正在尝试创建一个单页网站,默认情况下会加载1.component.html。当用户点击下一个按钮时,它将加载2.component.html。同样,如果用户当前在2.component.html上并单击后退按钮,则它将加载1.component.html。不需要路由。

2 个答案:

答案 0 :(得分:1)

听起来像任何标签控件。

基本上你需要一个变量,而每次点击都会改变它的状态:

let status = 1;

function onclick1(){
   this.status = 1;
} 

function onclick2(){
    this.status = 2;
}

<button (click)="onclick1()">page1</button>
<button (click)="onclick2()">page2</button>
<div *ngIf="status==1">page1</div>
<div *ngIf="status==2">page2</div>

答案 1 :(得分:-3)

首页加载时,它会重定向到component.html

//javascript code
<script type = "text/javascript">
window.onload = function() 
{
alert("ohk");
document.getElementById("fom_id").action = "1.component.html";}
</script>

'**************Below code to redirect on another page*******************
'**************Add this code on component.html file *******************

<script type="text/javascript">
//call this function on net button onclick event.
function validate()
{
alert("ohk");
var activeid = document.activeElement.id;
    if (activeid == "next")
    {
         document.getElementById("form_id").action = 2.component.html        document.getElementById("form_id").submit();
    }
}
</script>

//Add this same code for 2.component.html
//redirect it to 1.component.html