Question

我有一个Angular 4 App，它以登录界面开始，然后进入主页，主页是第一个使用sidenav的页面。当我将屏幕缩小时，我会按下按钮来显示侧面。当我点击它时，它不起作用，但是当我重新加载页面时，它可以工作。

所以我使用与Materialise CSS相同的代码和我在body.html中放入index.html的脚本。

的index.html

/**
   <#Description#>
    - Parameter opacity: <#opacity description#>
    - Returns: <#return value description#>
 */

的login.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Solventure</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="favicon.png">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <style>

  </style>
  <script>
    (function ($) {
      $(function () {

        $('.button-collapse').sideNav({
          edge: 'left', // Choose the horizontal origin
          closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
        });

      }); // end of document ready
    })(jQuery); // end of jQuery name space
  </script>
</head>
<body>


<app></app>

</body>
</html>

home.html的

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      <img src="../../../favicon.png">
      <form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
        <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
          <label>Username</label>
          <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel"
                 required/>
          <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
        </div>
        <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
          <label>Password</label>
          <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel"
                 required/>
          <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
        </div>
        <div class="form-group">
          <div class="button-set">
          <button [disabled]="loading" class="btn btn-primary">Login</button>
          <a [routerLink]="['/register']" class="btn btn-link">Register</a>
          </div>
        </div>
      </form>
      <alert></alert>
    </div>
  </div>
</div>

Angular 4 Materialize css sidenav按钮仅在重新加载页面时有效

0 个答案: