ionic 2如果从html页面条件为true,则重定向到另一页面

时间:2016-12-30 10:12:02

标签: angular typescript ionic2

我需要从离子2中的html页面重定向另一页 让我告诉本地机器上的系统设置 -

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Why Bootstrap</a></li>
           <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Why Bootstrap</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>To see the difference between static and fixed top navbars, just scroll.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
        </p>
      </div>

    </div> <!-- /container -->

当一些html页面被编译时,在html的一些代码行之后重定向它。我知道如何redirect from controller

******************************************************
Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: 5.0.8 
OS: OS X Yosemite
Node Version: v6.2.2
Xcode version: Xcode 7.2 Build version 7C68
******************************************************

但是现在我需要在某些条件成立时从html页面重定向,就像这样 -

if(1 > 2){
  this.rootpage = AuthTab;
}else{
  this.rootpage = AppTab;
}

由于我在点击时重定向,但我想在不点击

的情况下做同样的事情
 <div *ngIf="((condition=='true')&& !(condition =='true'))">
   <div class="myclass">
      <div class="myclass">
         <div class="myclass">
            <div class="myclass">
               <div class="myclass">
                  <div class="myclass">
                     <div class="myclass" (click)="somePage($event, param1, param2)"> 
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

mypage.ts 文件视为

(<div class="myclass" (click)="somePage($event, param1, param2)"> )

在上面的ts文件中,无需担心变量声明,我已经做到了。

还看到了这个URL列表: -

  1. Ionic 2 : popToRoot() doesn't redirect to root component ( home page )
  2. https://github.com/driftyco/ionic/issues/5484
  3. 希望得到帮助!

1 个答案:

答案 0 :(得分:0)

为什么不使用&#34; Eventemitter&#34;

在ts中编写事件函数并编写另一个监视条件的函数,并在条件为真后调用此事件函数 所以在这里你基本上是在条件变为真时调用event.notify

使用您实际从一个页面移动到另一个页面的另一个函数来捕获您触发的事件

EventEmitter非常有用 只是阅读它 它可以以多种方式使用